Angular 6 HTTP拦截器-捕获错误并重新发送请求后，视图未更新

Question

I am testing my HTTP Angular 6 Interceptor google token refresh functionality on a specific route as below.

It works (The request is re-sent with a new token and the data is returned) but the view that made the request is not updated (it is when not using the Interceptor).

Adding detectChanges() in the calling component in the http call's .then() will fix it but I don't want to have to add this (or NgZone.run()) to every http req in my app..

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

   if (req.url === 'XXX') {
        return this.refreshToken().pipe(
            switchMap(() => {
                req = this.addToken(req);
                return next.handle(req);
            })
            , catchError(() => {
                this.authService.signOut();
                return throwError('');
            })
        );
   }
   ...
}

/* Get new google ID token in Auth service and inform when done*/
refreshToken() {
    if (this.refreshTokenInProgress) {
        return new Observable(observer => {
            this.tokenRefreshed$.subscribe(() => {
                observer.next();
                observer.complete();
            });
        });
    } else {
        this.refreshTokenInProgress = true;

        return from(this.authService.refreshToken()).pipe(
           tap(() => {
                this.refreshTokenInProgress = false;
                this.tokenRefreshedSource.next();
            })
        );
    }
}

/* Add google id token to request header */
addToken(request) {
    const token = this.authService.googleIdToken;
    if (token) {
        return request.clone({ headers: request.headers.set('google-id-token', token) });
    }
    return request;
}

Answer 1

I was finally able to find a solution based on this answer: Http requests made from Ngxs state doesn't get detected by Angular (zone related issue)

Wrap the next.handle in an ngZone run():

return this._ngZone.run(() => {
  return next.handle(req).pipe(enterZone(this._ngZone));
});

function enterZone<T>(zone: NgZone) {
  return (source: Observable<T>) => {
    return new Observable((sink: Observer<T>) => {
      return source.subscribe({
        next(x) { zone.run(() => sink.next(x)); },
        error(e) { zone.run(() => sink.error(e)); },
        complete() { zone.run(() => sink.complete()); }
      });
    });
  };
}

I am not sure why the enterZone functionality is required on top of the standard zone.run() method but it worked for me in ensuring the view was refreshed when returning form the interceptor.