Reputation: 1211
I am trying to implement an HTTP interceptor so when the token is expired, I get the refresh_token, and then I call return next.handle(request);
, but it seems like I cannot return from the main pipe.
If I try to access my page as /API_URL/page1 and this returns a 401 status, I then get the refresh token, but /API_URL/page1 should be called again and it is not. I use "rxjs": "6.5.5"
. This is my code:
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const currentUser = this.lsService.getItem('currentUser') as any;
if(currentUser && currentUser.accessToken && this.checkIfUrlNeedsToken(request)) {
request = request.clone({ headers: request.headers.set('Authorization', currentUser.accessToken) });
}
return next.handle(request)
.pipe(tap(
(event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
// do stuff with response if you want
}
}, (err: any) => {
if(this.isRefreshTokenExpiredError(err)) {
this.redirectToLogin();
} else if(this.isAuthError(err) && this.checkIfUrlNeedsToken(request)) {
return this.authService.getNewToken().subscribe((response: User): Observable<HttpEvent<any>> => {
this.lsService.setItem('currentUser', response); // Rewrite the current user
request = request.clone({ headers: request.headers.set('Authorization', response.accessToken) });
return next.handle(request);
});
} else {
this.redirectToLogin();
}
}
));
}
Please advise. Thanks!
Upvotes: 0
Views: 478
Reputation: 13515
You can't return a value from a subscribe - you have to return the observable from within the pipe using either a switchMap
or a concatMap
.
Also, tap
is performing side-effects. You cannot return from a tap
. In your case you will need to return from a catchError
.
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const currentUser = this.lsService.getItem('currentUser') as any;
if(currentUser && currentUser.accessToken && this.checkIfUrlNeedsToken(request)) {
request = request.clone({ headers: request.headers.set('Authorization', currentUser.accessToken) });
}
return next.handle(request)
.pipe(
tap((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
// do stuff with response if you want
}
}, (err: any) => {
if (this.isRefreshTokenExpiredError(err)) {
this.redirectToLogin();
} else if(this.isAuthError(err) && this.checkIfUrlNeedsToken(request)) {
// handle in catchError
} else {
this.redirectToLogin();
}
}),
catchError((err: any) => {
if(!this.isAuthError(err) || !this.checkIfUrlNeedsToken(request)) {
return throwError(err);
}
return this.authService.getNewToken().pipe(
switchMap((response: User): Observable<HttpEvent<any>> => {
// Rewrite the current user
this.lsService.setItem('currentUser', response);
request = request.clone({ headers: request.headers.set('Authorization', response.accessToken) });
return next.handle(request);
});
})
);
}
The flow of error actions through the pipe is now something like:
I have moved the observable into a switchMap
inside a catchError
. I haven't changed any of your logic inside the tap
- that can probably be simplified now.
Upvotes: 2