In my project the backend exposed refresh token api. When you log in you get valid token and refresh token. When the token expires you need to make a refresh call, authorized with the old expired token and parameter refresh token. The response returns new valid token and new refresh token. At the moment i am trying to implement it inside my authorization guard. This is the code:
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;
}
);
}
}
}
}
But the problem is canActivate invokes, the call starts, refreshes token but i get 403 unauthorized from other calls that are on the activated page before the success response from the refresh. Also i cant figure out how to refresh token when i am standing on a page with save button, the token expires, i press save and update call is made, but with the expired token. Please suggest approaches :s