web-dev-qa-db-ja.com

Angular 5 Interceptor：TypeError：next.handle（...）。doは関数ではありません

私は認証トークンの有効性を確認するためにangularインターセプターを作成しました。どういうわけか、doメソッドはangleによって認識されません。subscribeは機能しますが、サーバーに送信されるリクエストが2倍になるので、このソリューション。

TypeError: next.handle(...).do is not a function
at AuthTokenService.webpackJsonp.../../../../../src/app/commons/services/interceptors/auth-token.service.ts.AuthTokenService.intercept (auth-token.service.ts:37)
at HttpInterceptorHandler.webpackJsonp.../../../common/esm5/http.js.HttpInterceptorHandler.handle (http.js:1796)
at XsrfService.webpackJsonp.../../../../../src/app/commons/services/interceptors/xsrf.service.ts.XsrfService.intercept (xsrf.service.ts:15)
at HttpInterceptorHandler.webpackJsonp.../../../common/esm5/http.js.HttpInterceptorHandler.handle (http.js:1796)
at HttpXsrfInterceptor.webpackJsonp.../../../common/esm5/http.js.HttpXsrfInterceptor.intercept (http.js:2489)
at HttpInterceptorHandler.webpackJsonp.../../../common/esm5/http.js.HttpInterceptorHandler.handle (http.js:1796)
at MergeMapSubscriber.project (http.js:1466)
at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:128)
at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:118)
at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber.next (Subscriber.js:92)

ここに私のインターセプターのコードがあります：

import { Injectable, NgModule} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from 
'@angular/common/http';
import { SessionService } from 'app/commons/services/auth/session.service';
import { HttpErrorResponse } from "@angular/common/http";
import { StateService } from '@uirouter/angular';

import 'rxjs/add/operator/do';

import * as _ from "lodash";

@Injectable()
export class AuthTokenService implements HttpInterceptor {
  constructor(
    private sessionService: SessionService,
    private stateService: StateService
  ) {}

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

    const currUser = this.sessionService.getCurrentUser();
    const authToken = _.get(currUser, ['auth_token'], null);

    let dupReq = req.clone({ headers: req.headers.set('Authorization', '') });

    if (!_.isNil(authToken)) {
      dupReq = req.clone({ headers: req.headers.set('Authorization', `Token ${authToken}`) });
    }

    return next.handle(dupReq)
      .do(ev => {
        console.log(event);
      })
  }
};

私は何も見逃したとは思いませんが、何らかの理由で、doの副作用がありません ガイド内

typescriptangular5angular-http-interceptors
9
Burning Crystals

ここで私の間違いを見つけました。 angular 5では、演算子はlettable operators。私はこの技術を使うのが初めてなので、彼らが何をするのかよくわかりませんまだ。しかし、Angular 4のドキュメントとインターセプターの仕組みに関する回答を見て）の数時間の完全なフラストレーションの後、私はついにこの記事に出会いました： Angular 5：Upgrade＆Summary of New Features

私の更新されたコード：

import { map, filter, tap } from 'rxjs/operators';

@Injectable()
export class AuthTokenService implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const started = Date.now();
        return next.handle(dupReq).pipe(
        tap(event => {
          if (event instanceof HttpResponse) {
            const elapsed = Date.now() - started;
            console.log(`Request for ${req.urlWithParams} took ${elapsed} ms.`);
          }
        }, error => {
          console.error('Nice ERROR', error)
        })
      )
    }
}

hTTPリクエストからのエラーをチャームのようにキャッチします。

16
Burning Crystals