web-dev-qa-db-ja.com

Angular）に条件付きでHttpClientインターセプターを追加する方法

最近、私はAngular HttpClientでインターセプターを使用しています。

一部のHTTPGETメソッドに対応するヘッダーを追加しますが、一部の場合はそれらのヘッダーは必要ありません。

これらのメソッドのみにインターセプターを条件付きで追加するようにインターセプターに指示するにはどうすればよいですか？ヘッダー用とヘッダーなしのサービス、または異なるヘッダー用と別のサービス用のサービスを分割することもできます。

NgModuleプロバイダー

{
  provide: HTTP_INTERCEPTORS,
  useClass: AuthInterceptor,
  multi: true,
},{
  provide: HTTP_INTERCEPTORS,
  useClass: AngularInterceptor,
  multi: true,
}

MyInterceptors

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({headers: req.headers.set('X-Auth-Token', "-------------------------")});
    return next.handle(authReq);

  }
}


@Injectable()
export class AngularInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).do(event => {}, err => {
        if(err instanceof HttpErrorResponse){
            console.log("Error Caught By Interceptor");
            //Observable.throw(err);
        }
    });
  }
}
angularangular-httpangular-http-interceptorsangular-httpclient
9
Rahul Singh

注：私はまだこのアプローチを試していませんが、同様の問題を検討しているため、このアイデアを試してみました。

要件が非常に単純な場合、汎用インターセプターにロジックを追加し、URL /メソッドに基づいて実行するインターセプトの種類を決定するのは簡単です。ただし、angularアプリは、インターセプターの要件が異なるさまざまなファーストパーティマイクロサービスとサードパーティAPIを呼び出す必要があります。これは、事実上、要件のスーパーセットです。

これを実装するための1つのアイデアは、呼び出す必要のあるAPI /サービスごとにHttpClientを拡張し、インターセプターチェーンのカスタムインジェクショントークンを設定することです。 angularがデフォルトのHttpClientここ を登録する方法を確認できます。

 providers: [
    HttpClient,
    // HttpHandler is the backend + interceptors and is constructed
    // using the interceptingHandler factory function.
    {
      provide: HttpHandler,
      useFactory: interceptingHandler,
      deps: [HttpBackend, [new Optional(), new Inject(HTTP_INTERCEPTORS)]],
    },

interceptingHandler関数は偶数です exported as ɵinterceptingHandler。私はこれが少し奇妙に見えることに同意します、なぜそれがそのエクスポート名を持っているのか分かりません。

とにかく、カスタムHttpClientを使用するには、おそらく次のことができます。

export const MY_HTTP_INTERCEPTORS = new InjectionToken<HttpInterceptor[]>('MY_HTTP_INTERCEPTORS');

...
 providers: [
    MyHttpClient,
    {
      provide: MyHttpHandler,
      useFactory: interceptingHandler,
      deps: [HttpBackend, [new Optional(), new Inject(MY_HTTP_INTERCEPTORS)]],
    },

また、MyHttpClientのコンストラクターにMyHttpHandlerが必要であることを確認してください。

1
Johannes Rudolph