angular2 обновить токен через сервис

Question

В моем проекте бэкэнд выставил обновить токен API. При входе в систему вы получаете действительный токен и обновляете токен. Когда срок действия токена истекает, необходимо выполнить вызов обновления, авторизованный со старым токеном с истекшим сроком действия и токеном обновления параметра. Ответ возвращает новый действительный токен и новый токен обновления. На данный момент я пытаюсь реализовать это в моей авторизации. Это код:

 import { Injectable } from '@angular/core';
 import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot }     from '@angular/router';
 import { Observable } from 'rxjs/Rx';

 import { SessionService } from '../services/session.service';

@Injectable()
export class AuthorizationGuard implements CanActivate {

constructor(private sessionService: SessionService, private router: Router) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> {
    if (this.sessionService.isAuthenticated() ) {
        console.log('guard has cookies');
        return true;
    } else {
        if(this.sessionService.checkStorageSession() == null) {
            this.router.navigate(['/']);
        } else {
            console.log('guard will refresh token via refresh token call  ');
            this.sessionService.refreshToken()
                .subscribe(
                    data => {
                        console.log('guard  refresh success');
                        this.sessionService.destroySessionCookie();
                        this.sessionService.rememberUser(data.accessToken);
                        this.sessionService.rememberRefreshTocken(data.refreshToken);
                        this.sessionService.setSessionCookie(data.accessToken);
                        this.sessionService.setRefreshTocken(data.refreshToken);
                        return true;
                    },
                    error => {
                        console.log('session refresh fail: ' + error);
                        this.router.navigate(['/']);
                        return false;
                    }
            );
        }
    }
}

}

Но проблема в том, что canActivate вызывает, звонок запускается, обновляет токен, но я получаю 403 несанкционированных от других вызовов, которые находятся на активированной странице, до успешного ответа от обновления. Также я не могу понять, как обновить токен, когда я стою на странице с кнопкой "Сохранить", токен истекает, я нажимаю "Сохранить" и выполняется вызов обновления, но с токеном с истекшим сроком действия. Пожалуйста, предложите подходы:s

Answer 1

Я использовал этот подход, в AuthorizationGuard у вас есть проверка:

if(!this.sessionService.isUserAuthenticated){
  this.router.navigate(['/']);
}

Где isAuthenticated=true означает, что пользователь имеет действительный refreshToken. И я переопределил службу http, чтобы иметь логику обновления токенов:

var authenticatedCall: Observable<any>;
      if (needToken) {
          if (this.sessionService.isUserAuthenticated) {
               authenticatedCall = this.sessionService.acquireToken()
               .flatMap((token: string) => {
                         if (options1.headers == null) {
                           options1.headers = new Headers();
                         }
                            options1.headers.append('Authorization', 'Bearer ' + token);
                            return this.http.request(url, options1);
                     });
                }
                else {
                    authenticatedCall = Observable.throw(new Error("User Not Authenticated."));
                }
        }
        else {            
            authenticatedCall = this.http.request(url, options).map(this.extractData);
 }

В качестве примера я использовал это: https://github.com/sureshchahal/angular2-adal/blob/master/src/services/authHttp.service.ts