I am following this example: https://www.intertech.com/Blog/angular-4-tutorial-handling-refresh-token-with-new-httpinterceptor/
All works well, except the method handle401Error
. It does not execute, unless I add subscribe
in the interceptor. I must be missing something, even though trying to follow that example.
Here's the relevant code:
Component:
ngOnInit() {
this.service.getData()
.subscribe((response: any) => {
this.message = `Worked with status = ${response.status}`;
},
error => this.message = `Failed with status = ${error.status}`);
}
Service:
constructor(private http: HttpClient) {
this.currentToken = this.authTokenStale;
}
public authTokenStale: string = 'stale_auth_token';
public authTokenNew: string = 'new_auth_token';
public currentToken: string;
getData() {
return this.http.get<{status}>('https://private-4002d-testerrorresponses.apiary-mock.com/getDataError401');
}
getAuthToken() {
return this.currentToken;
}
refreshToken(): Observable<string> {
this.currentToken = this.authTokenNew;
return Observable.of(this.authTokenNew).delay(200);
}
Interceptor:
isRefreshingToken: boolean = false;
tokenSubject: BehaviorSubject<string> = new BehaviorSubject<string>(null);
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log('interceptor fired!')
let service = this.inj.get(Service);
// addToken() returns headers, getAuthToken() returns token
return next.handle(this.addToken(request, service.getAuthToken())).do((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
// success
}
}, (err: any) => {
if (err instanceof HttpErrorResponse) {
if (err.status === 401) {
return this.handle401Error(request, next);
}
}
});
}
handle401Error:
handle401Error(req: HttpRequest<any>, next: HttpHandler) {
if (!this.isRefreshingToken) {
this.isRefreshingToken = true;
let service = this.inj.get(Service);
this.tokenSubject.next(null);
return service.refreshToken()
.switchMap((newToken: string) => {
console.log('goes to switchMap') // does not come here!
if (newToken) {
this.tokenSubject.next(newToken);
return next.handle(this.addToken(this.getNewRequest(req), newToken));
}
return this.logoutUser();
})
.catch(....)
//.subscribe(() => {) // only works!
.finally(() => {
console.log('goes to finally')
this.isRefreshingToken = false;
});
} else {
return this.tokenSubject
.filter(token => token != null)
.take(1)
.switchMap(token => {
return next.handle(this.addToken(this.getNewRequest(req), token));
});
}
}
Sorry, a bit of code, but I think all is relevant to be able to reproduce the issue.
I also made a
to showcase the issue!
If you use Angular 6, remember about changes in RxJS library.
In new RxJS, line with do
operator
next.handle(req).do(() => {});
must be changed to:
next.handle(req).pipe(tap(() => {}));
Check this article for more info: