代码之家 › 专栏 › 技术社区 › Unknwn Artist

新RXJS的403响应角6处理

angular-http-interceptors angular

Unknwn Artist · 技术社区 · 6 年前

问题:

我有一个拦截器:

@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 也不怎么管用。

这个 topic 说这是RXJS变化的结果。做出建议的更改后,问题仍然存在(现在使用“tap”代替“do”)

以下是导入部分:

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

注意:评论行也已经尝试过了。

4 回复 | 直到 6 年前

Jbrown 6 年前

为了使我的项目(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 .

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

和

注意:由于与javascript保留字的名称冲突,某些运算符有名称更改!这些选项包括:do->点击、catch->catcherror、switch->switchall、finally->finalize。

Zlatko 6 年前

如果你的错误是 property 'do' doesn't exist on type Observable ,请尝试导入运算符。把这个放在你的文件上面:

import 'rxjs/add/operator/do';

Prabhu Tiwari 6 年前

面对同样的问题,我是这样解决的

NG更新(更新所有包并使其与Angular 6兼容)
npm install rxjs compat@6--save(安装rxjs的更新版本)
在整个代码中替换以下函数,因为它们是在rxjs中更新的

do=>点击, catch=>捕捉错误, switch=>切换全部, finally=>完成

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

Unknwn Artist 6 年前

解决方案:

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

import {Observable} from 'rxjs';

import 'rxjs/add/operator/do';

在我看来 不需要 更改“do”->“tap”;
如果使用角材料,运行第一个命令后可能需要重新安装。