web-dev-qa-db-de.com

Wie man HttpClient Interceptors bedingt hinzufügt Angular

Vor kurzem habe ich Interceptors mit Angular HttpClient verwendet.

Ich füge Header hinzu, die einigen HTTP-GET-Methoden entsprechen, und für einige benötige ich diese Header nicht.

Wie kann ich meinen Interceptor anweisen, nur diesen Methoden Interceptors bedingt hinzuzufügen? Ich kann sogar Dienste wie einen für Überschriften und einen ohne Überschriften oder einen für verschiedene Überschriften und einen für verschiedene aufteilen.

NgModule-Anbieter

{
  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);
        }
    });
  }
}
7
Rahul Singh

Hinweis: Ich habe diesen Ansatz noch nicht selbst ausprobiert, aber mit der Idee gespielt, da wir ein ähnliches Problem untersuchen.

Wenn wir sehr einfache Anforderungen hätten, wäre es trivial, Logik in einen Allzweck-Interceptor einzufügen und basierend auf der URL/Methode zu entscheiden, welche Art von Interception ausgeführt werden soll. Unsere Angular App muss jedoch eine Vielzahl von Mikrodiensten von Drittanbietern und APIs von Drittanbietern mit unterschiedlichen Anforderungen an Abfangjäger aufrufen. Dies ist effektiv eine Obermenge Ihrer Anforderungen.

Eine Idee, dies zu implementieren, besteht darin, HttpClient für jede API/jeden Service zu erweitern, die/den wir aufrufen müssen, und ein benutzerdefiniertes Injektionstoken für die Interceptor-Kette einzurichten. Sie können sehen, wie Angular die Standardeinstellung HttpClienthier registriert:

 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)]],
    },

Die Funktion interceptingHandlerwird sogar exportiert als ɵinterceptingHandler. Ich bin damit einverstanden, dass dies ein bisschen komisch aussieht, nicht sicher, warum es diesen Exportnamen hat.

Wie auch immer, um ein benutzerdefiniertes HTTP-Client zu verwenden, können Sie wahrscheinlich:

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)]],
    },

Und stellen Sie sicher, dass für MyHttpClientein MyHttpHandlerin seinem Konstruktor erforderlich ist.

1