Angular 6 使用新的 RxJS 处理 403 响应

Question

问题：

我有拦截器：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private injector: Injector, private router: Router) {
  }


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

    const auth = this.injector.get(AuthenticationService);
    const authHeaders = auth.getAuthHeader();
    const authReq = request.clone({headers: authHeaders});

     return next.handle(authReq).do((event: HttpEvent<any>) => {
       if (event instanceof HttpResponse) {

       }
     }, (err: any) => {
       if (err instanceof HttpErrorResponse) {
         if (err.status === 403) {
           this.router.navigate(['login']);
         }
       }
     });
  }
}

它在 Angular 5 中很旧，但现在我已经迁移到 6 并且它不再起作用了。

它说属性 'do' 在 Observable 类型上不存在。

我也尝试通过这个线程实现解决方案：效果不佳。

这 topic 表示这是 rxjs 更改的结果。进行建议的更改后，问题仍然存在（现在使用 'tap' 而不是 'do'）

这里是导入部分：

// import {Observable} from "rxjs/Observable";
import {Observable} from "rxjs/Rx";
import { tap } from 'rxjs/operators';

注：注释行也试过了

Answer 1

如果您的错误是 property 'do' doesn't exist on type Observable，请尝试导入运算符。把它放在你的文件的顶部：

import 'rxjs/add/operator/do';

Answer 2

遇到同样的问题，这是我的解决方法

ng 更新（更新所有包并使其与 angular 6 兼容）
npm install rxjs-compat@6 --save（安装更新版本的 rxjs）
替换整个代码中的以下函数，因为它们已在 rxjs
中更新
做 => 点击，捕捉 => 捕捉错误，开关 => 开关全部，最后 => 完成

有关更多信息，请查看 rxjs 更改日志。

Answer 3

解决方案：

运行 'npm install rxjs-compat@6 --save';
导入应如下所示：

import {Observable} from 'rxjs';

import 'rxjs/add/operator/do';

在我的情况下 不需要 更改 'do' -> 'tap';
如果使用 angular material，在第一个命令运行后可能需要重新安装。

Answer 4

为了让这个适用于我的项目（Angular 6，RxJS 6），我必须进行以下更改：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Router } from '@angular/router';

并将上面的代码段修改为：

（链接更改为管道，并将 'do' 更改为 'tap'）

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private injector: Injector, private router: Router) {
  }


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

    const auth = this.injector.get(AuthenticationService);
    const authHeaders = auth.getAuthHeader();
    const authReq = request.clone({headers: authHeaders});

     return next.handle(authReq).pipe(
       tap((event: HttpEvent<any>) => {
         if (event instanceof HttpResponse) {

         }
       }, (err: any) => {
         if (err instanceof HttpErrorResponse) {
           if (err.status === 403) {
             this.router.navigate(['login']);
           }
         }
       })
   );
  }
}

造成这种情况的原因有一些 recent changes in RxJS 6。

Use piping instead of chaining as new operator syntax. The result of one operator is piped into another operator.

和

Note Some operators have a name change due to name collisions with JavaScript reserved words! These include: do -> tap, catch -> catchError, switch -> switchAll, finally -> finalize.

Angular 6 使用新的 RxJS 处理 403 响应

Angular 6 handling of 403 response with new RxJS

angular-http-interceptors

angular