Angular 拦截器更改响应

Question

我有一个授权 HttpInterceptor:

import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, 
HttpRequest} from '@angular/common/http';
import {AuthService} from '../service/auth.service';
import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';
import {Router} from '@angular/router';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService,
              private router: Router) {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authHeader = this.authService.getToken();
    const clone = req.clone({headers: req.headers.set('Authorization',authHeader)});
    return next.handle(clone).do(() => {
}, err => {
  console.log(err);
  if (err instanceof HttpErrorResponse && err.status === 401) {
    this.authService.clearToken();
    this.router.navigate(['/auth/signin']);
    return Observable.empty();
      }
    });
  }
}

这个拦截器工作正常，但是当我收到 401 时，我将用户重定向到登录页面，但错误仍然存在于服务中，并且在那个服务中我显示错误信息，这个信息显示在登录页面。所以我想改变响应或在 if (err instanceof HttpErrorResponse && err.status === 401) { 块中做一些事情，在这种情况下不返回错误。

return Observable.empty();

不工作

Answer 1

next.handle(clone).do() - 这就是导致此类行为的原因。 do() 运算符仅用于提供副作用，但实际上并不影响可观察管道中的数据流和错误处理。本质上是说 "when this happens please do this and that and then continue as if there's no do() section at all"。如果要抑制错误，则需要使用 catch() 运算符。

代码几乎相同：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private authService: AuthService,
                private router: Router) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const authHeader = this.authService.getToken();
        const clone = req.clone({headers: req.headers.set('Authorization',authHeader)});
        return next.handle(clone).catch(err => { // <-- here
            console.log(err);
            if (err instanceof HttpErrorResponse && err.status === 401) {
                this.authService.clearToken();
                this.router.navigate(['/auth/signin']);
                return Observable.empty();
            }
            // we must tell Rx what to do in this case too
            return Observable.throw(err);
        });
    }
}

Angular 拦截器更改响应

Angular4 Interceptor change response

angular

angular-http-interceptors

angular4-httpclient