angular - 如何拦截401未授权并添加新的授权码？

Question

我想在一个组件中检测我的 HTTP 请求的 401 响应代码:

@Injectable()
export class InterceptorProvider implements HttpInterceptor {

  constructor(private authService: AuthenticationService) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      console.log(request);
      return next.handle(request);
  }

如何捕获错误，执行刷新 token 请求，并在响应代码正常的情况下让其他组件继续？

更新

@Injectable()

导出类InterceptorProvider实现HttpInterceptor{

constructor(private authService: AuthenticationService, private storage: Storage) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  console.log(request);
  return next.handle(request)
    .pipe(tap(event => {
        if (event instanceof HttpResponse) {
        }
      }, err => {
        if (err instanceof HttpErrorResponse) {
          if (err.status === 401) {

            console.log(err);
            console.log("Retriving user....");
           let user = new User();
this.storage.get('username').then((result)=>{
  console.log(result);
  user.username = result;
  let pass = this.storage.get('password').then((result)=>{
    console.log(result);
    user.password = result;
    console.log(user.username);
console.log(user.password);

  console.log("user ok");
  this.authService.login(user.username, user.password).toPromise().then(response=>{
    let token = response['message'];
    this.storage.set('token', token);
    this.addToken(request, token);
    return next.handle(this.addToken(request, token));
  });

  });
});
          }
        }
      })
    )
}

// Adds the token to your headers if it exists
private addToken(request: HttpRequest<any>, token: any) {
    if (token) {
        let clone: HttpRequest<any>;
        clone = request.clone({
            setHeaders: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                Authorization: token
            }
        });
        return clone;
    }

    return request;
}

}

这个新版本做了重新登录操作，但没有更进一步，看来重新做原始请求有问题，添加了新的访问 token ；我哪里错了？

更新

这是控制台错误:

core.js:9110 ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":401,"statusText":"Unauthorized","url":"https://www.fantacalciopizza.it/php/formazioniinviatejson2.php","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://www.fantacalciopizza.it/php/formazioniinviatejson2.php: 401 Unauthorized","error":"\n\n"}
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
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 drainMicroTaskQueue (zone-evergreen.js:559)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
at invokeTask (zone-evergreen.js:1603)

然后就是尝试登录，得到了响应，但是克隆的请求好像没有被执行；我哪里错了？

Answer 1

尝试这样:

 return next.handle(authRquest)
        .pipe(
          tap(event => {
            if (event instanceof HttpResponse) {
            }
          }, err => {
            if (err instanceof HttpErrorResponse) {
              if (err.status === 401) {
                // handle error
              }
            }
          })
        )