Angular HTTP 拦截器错误未刷新视图

Question

I am following this tutorial https://angular-academy.com/angular-jwt/ and I need a little help with my HTTP interceptor class.

When I successfully refresh the token after 401 (Unauthorized error), the code retry the HTTP call and I get the OK back but the view and subscription isn't updating and I sometime get the following error:

core.js:9110 ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
   at subscribeTo (subscribeTo.js:27)
   at subscribeToResult (subscribeToResult.js:11)
   at CatchSubscriber.error (catchError.js:38)
   at XMLHttpRequest.onLoad (http.js:1974)
   at ZoneDelegate.invokeTask (zone-evergreen.js:391)
   at Object.onInvokeTask (core.js:34182)
   at ZoneDelegate.invokeTask (zone-evergreen.js:390)
   at Zone.runTask (zone-evergreen.js:168)
   at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:465)
   at invokeTask (zone-evergreen.js:1603) (editado) 

This is my 401 handler:

private handle401Error(request: HttpRequest<any>, next: HttpHandler,tokens) {
  if (!this.isRefreshing) {
    this.isRefreshing = true;
    this.refreshTokenSubject.next(null);
    return this.auth.refreshToken(tokens).pipe(
      switchMap((token: any) => {
        this.isRefreshing = false;
        this.refreshTokenSubject.next(token.token);
        this.db.removeAll('token');
        this.db.storage.set('token',token);
        return next.handle(this.addToken(request, token.token));
      })).subscribe(r => r);
  } else {
    return this.refreshTokenSubject.pipe(
      filter(token => token != null),
      take(1),
      switchMap(jwt => {
        console.log(jwt)
        return next.handle(this.addToken(request, jwt));
      }));
  }
}

Answer 1

So, here we go again.

That error is thrown because you aren't returning an observable in your intercept() method if the error is 401 (if I remember correctly from your first post).

You should not manually subscribe in the interceptor. Angular does that for you. You need to return an observable instead, using RxJS operators like switchMap . For side effects use the tap operator.

Your handle401Error after removing the subscription should be:

private handle401Error(request: HttpRequest<any>, next: HttpHandler,tokens) {
    if (!this.isRefreshing) {
      this.isRefreshing = true;
      this.refreshTokenSubject.next(null);

      return this.auth.refreshToken(tokens).pipe(
        switchMap((token: any) => {
          this.isRefreshing = false;
          this.refreshTokenSubject.next(token.token);
          this.db.removeAll('token');
          this.db.storage.set('token',token);

          return next.handle(this.addToken(request, token.token));
        }));
    } else {

      // I'm not sure about this part since to me it seems that in this block the 
      // subject it will always emit null value after the token expires and the
      // browser is refreshed because the data won't persist.
      // if I'm right use this here and should work: **return next.handle(request);**
      return this.refreshTokenSubject.pipe(
        filter(token => token != null),
        take(1),
        switchMap(jwt => {
          console.log(jwt)
          return next.handle(this.addToken(request, jwt));
        }));
    }
  }

The intercept method:

 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    if (this.authService.getJwtToken()) {
      request = this.addToken(request, this.authService.getJwtToken());
    }

    return next.handle(request).pipe(catchError(error => {
      if (error instanceof HttpErrorResponse && error.status === 401) {
        // here don't forget tor return
        return this.handle401Error(request, next);
      } else {
        return throwError(error);
      }
    }));
  }

Answer 2

Try Remove.subscribe(r => r) call after next.handle. You need to return observable, not function call.

return next.handle(
    this.addToken(request, token.token)
);