web-dev-qa-db-ja.com

Angular 6新しいRxJSでの403応答の処理

問題：

私はインターセプターを持っています：

@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タイプに存在しないことを示しています。

また、私はこのスレッドからソリューションを実装しようとしました： [〜＃〜] link [〜＃〜] 同様に機能しませんでした。

これ topic は、rxjsの変更の結果であると言います。提案された変更を行った後も問題は残ります（現在は「do」ではなく「tap」を使用しています）

ここにインポートセクションがあります：

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

注：コメント行も試されています。

angularangular-http-interceptors
5
Unknwn Artist

解決策：

  1. 'npm install rxjs-compat @ 6 --save';を実行します。
  2. インポートは次のようになります。
import {Observable} from 'rxjs';

import 'rxjs/add/operator/do';

  1. 私の場合、NO NEED 'do'-> 'tap'を変更する必要がありました。

  2. angularマテリアルが使用されている場合、最初のコマンドの実行後に再インストールが必要になる場合があります。

0
Unknwn Artist

これを私のプロジェクト（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の予約語との名前の衝突により、名前が変更されています。これらには、do-> tap、catch-> catchError、switch-> switchAll、finally-> finalizeが含まれます。

1
Jbrown

同じ問題に直面しました、これが私が解決した方法です

  1. ng update（すべてのパッケージを更新し、angular 6）と互換性を持たせるため）
  2. npm install rxjs-compat @ 6 --save（rxjsの更新バージョンをインストールします）

  3. rxjsで更新されるため、コード全体で次の関数を置き換えます

    do =>タップ、catch => catchError、switch => switchAll、finally =>ファイナライズ

詳細については、rxjsの変更ログを確認してください。

0
Prabhu Tiwari

エラーがproperty 'do' doesn't exist on type Observableの場合は、演算子をインポートしてみてください。これをファイルの上に置きます。

import 'rxjs/add/operator/do';
0
Zlatko