web-dev-qa-db-fra.com

Comment ajouter des Intercepteurs HttpClient de manière conditionnelle dans Angular

Récemment, j'ai utilisé des intercepteurs avec Angular HttpClient.

J'ajoute des en-têtes correspondant à certaines méthodes HTTP GET et, pour certains, je n'ai pas besoin de ces en-têtes.

Comment puis-je dire à mon intercepteur d'ajouter des intercepteurs à ces méthodes uniquement? Je peux même diviser des services, par exemple un service pour les en-têtes et un autre sans en-tête ou un pour différents en-têtes et un pour différents.

Fournisseurs 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
7
Rahul Singh

Remarque: je n'ai pas encore essayé cette approche moi-même, mais j'ai joué avec l'idée car nous examinons un problème similaire.

Si nous avions des exigences très simples, il serait trivial d’ajouter de la logique dans un intercepteur à usage général et de décider en fonction de l’URL/de la méthode du type d’interception à effectuer. Cependant, notre application angulaire doit appeler une variété de micro-services de première partie et d’API de tierces parties avec des exigences différentes pour les intercepteurs. C'est effectivement un sur-ensemble de vos besoins. 

Une idée à mettre en œuvre consiste à étendre HttpClient à chaque API/service à appeler et à configurer un jeton d'injection personnalisé pour la chaîne d'intercepteurs. Vous pouvez voir comment angular enregistre la valeur par défaut HttpClientici :

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

La fonction interceptingHandler est même exportée en tant que ɵinterceptingHandler. Je conviens que cela semble un peu bizarre, je ne sais pas pourquoi il porte ce nom d'exportation. 

Quoi qu'il en soit, pour utiliser un HttpClients personnalisé, vous pouvez probablement:

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

Et assurez-vous que MyHttpClient nécessite une MyHttpHandler dans son constructeur. 

1
Johannes Rudolph