角度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']);
         }
       }
     });
  }
}

它在角5中工作，但现在我已经迁移到6，这不再工作了。

它表示属性do不存在于可观察类型上。

我还尝试从这个线程实现解决方案：LINK也不起作用。

本主题说这是rxjs更改的结果。进行建议的更改后，问题仍然存在（现在使用“点击”而不是“执行”）

这里是导入部分：

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

注意：注释行也被尝试过。

Answer 1

面对同样的问题，这是我如何解决的

>

ng更新（更新所有软件包并使其与角6兼容）

npm安装rxjs-compat@6-保存（安装更新版本的rxjs）

在整个代码中替换以下函数，因为它们在rxjs中更新

做=

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

Answer 2

如果错误为类型Observable上不存在属性“do”，请尝试导入运算符。将此项放在您的文件顶部：

import 'rxjs/add/operator/do';

Answer 3

为了使我的项目（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']);
           }
         }
       })
   );
  }
}

原因是RxJS 6最近发生了一些变化。

使用管道而不是链接作为新的运算符语法。一个运算符的结果被传入另一个运算符。

和

注意，由于与JavaScript保留字的名称冲突，某些运算符的名称发生了更改！这些包括：做什么-