In my Angular application to avoid having to much request with invalid token to the backend, I wanted to check for every request first if the token is valid. If not refresh first the token and then emit the source request.
As the method to refresh a token is also a call to the backend (an observable), I have to concat those two observables.
As I know in the frontend when a token is expired, I don’t want to send first the request, and wait that it fails and then handle the error.. I would like to refresh it before, and send this request just once, as it will be valid for the following request too…
I tried several ways to concat those two request, but I have always again issues with the return type.
This is what I could build for now:
Some logic to send the authentication request in case if the token is invalid. (Don’t do that in case if the authentication is the request itself!
Also some logic to wait for an already ongoing refreshAuthentication request by storing it static in the class.
export class AuthHeaderInterceptor implements HttpInterceptor {
constructor() {}
static authenticationOngoing = false;
static authenticationObservable: Observable<boolean>;
public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
/**
* check if the token is valid.
* If valid send request
* If invalid call "refreshAuthentication()", wait for result, and send request based on result...
*/
if (!this._isAuthenticationRequest(request) && !this.checkToken()) {
if (!AuthHeaderInterceptor.authenticationOngoing) {
// send request and wait for response
AuthHeaderInterceptor.authenticationOngoing = true;
AuthHeaderInterceptor.authenticationObservable = this.refreshAuthentication();
AuthHeaderInterceptor.authenticationObservable.subscribe(() => {
AuthHeaderInterceptor.authenticationOngoing = false;
// submit source request or reroute if invalid
});
} else {
AuthHeaderInterceptor.authenticationObservable.subscribe(() => {
// submit source request or reroute if invalid
});
}
}
return next.handle(request);
}
private checkToken() {
return this._configStore.getToken().getEndtime() > new Date().getTime() + 10000;
}
private _isAuthenticationRequest(request): boolean {
return request.url.endsWith('/api/authentication');
}
private refreshAuthentication(): Observable<boolean> {
// returns Observable (as it's doing another request). Value represents if its successfully.
}