从 AuthInterceptor 中的 HttpErrorHandle 跳过模态 window

Question

我有 HttpErrorInterceptor 和 AuthInterceptor。他们都在处理错误代码 400。当我尝试刷新 jwt 令牌并且后端抛出错误请求时出现问题，因为刷新令牌已过期或无效。万一在 /api/token/refresh 上发生错误请求，我只想注销用户并 抑制所有错误 。我添加了一个额外的 header ，它应该跳过 HttpErrorInterceptor 中的错误模式 window 但问题是实际错误发生在跳过代码之前，最后是烦人的模式 window 消息出现。

如果您查看下图，您会看到 this.authService.logout() 已执行，紧随其后的是 HTTP Interceptor Skip（来自 HttpErrorInterceptor），实际错误显示在它们上方。

我如何抑制 /api/token/refresh (this.authService.refreshToken()) 的所有错误消息，所以当它失败时，它不会弹出错误代码 400 的模态 window？

https://stackblitz.com/edit/angular-dziwbx

Answer 1

我发现很难确切地说出问题是什么（因为我不知道 Angular 如何在幕后处理这个问题），但我认为这归结为发出错误的流如何能够得到处理。

const obsErr$ = throwError('err');

function intercept (src) {  
  return src
    .pipe(
      catchError(v => {
        return of('err caught in int1: ' + v);
      })
    )
}

function intercept2 (src) {
  return src
    .pipe(
      catchError(v => {
        return of('err caught in int2: ' + v);
      })
    )
}

案例一

obsErr$
  .pipe(
    intercept,
    intercept2,
  )
  .subscribe(console.log) // err caught in int1: err

错误只会在第一个拦截器中被捕获一次。

案例二

obsErr$.pipe(intercept)
  .subscribe(v => console.log('i1', v))

obsErr$.pipe(intercept2)
  .subscribe(v => console.log('i2', v))

在这里，每个拦截器都有自己的来源和自己要捕获的错误。

我希望这对您有所帮助。

StackBlitz.

Answer 2

我用 HttpBackend 做到了。它基本上绕过了拦截器。

import { HttpClient, ..., HttpBackend } from '@angular/common/http';

@Injectable()
export class TestService {

  private httpClient: HttpClient;

  constructor( handler: HttpBackend) { 
     this.httpClient = new HttpClient(handler);
  }
....

从 AuthInterceptor 中的 HttpErrorHandle 跳过模态 window

Skipping modal window from HttpErrorHandle in AuthInterceptor

angular-http-interceptors

angular

案例一

案例二