Angular HTTP interceptor - Cannot return from inner subscription

Question

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!

Kurt Hamilton Kurt Hamilton · Accepted Answer · 2020-04-03T16:34:25

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:

tap: redirect if necessary
catchError: get new token if necessary
- switchMap: re-run http request

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.

Angular HTTP interceptor - Cannot return from inner subscription

1 Answers