Comment utiliser deux instances de HttpClient (une avec 2 intercepteurs et l'autre avec 1 intercepteur) dans Angular 4.3?

Question

Dans notre projet Angular 4.3, nous avons des composants de site public et des composants de site sécurisé (connectés) séparément. Nous utilisons @angular/common/http. Nous voulons implémenter différents intercepteurs http pour les composants public-site et les composants secured-site. Par exemple,

1. composants publics site - d'appliquer seulement au-dessous intercepteur
   LoggingInterceptor
2. composants sécurisé site - à appliquer en dessous de deux intercepteurs
   LoggingInterceptor
AuthTokenInterceptor (pour passer le jeton d'authentification en-tête de requête)

Nous avons essayé d'ajouter les détails des fournisseurs HTTP_INTERCEPTORS à chaque niveau de composant @Component avec différents intercepteurs. Mais la demande ne va pas dans l'un des intercepteurs.

La demande est en cours d'interception uniquement si nous ajoutons les détails du fournisseur HTTP_INTERCEPTORS dans @NgModule. Ici, le problème est, les demandes http du site public vont également dans AuthTokenInterceptor qui n'est pas nécessaire.

Alors, comment devrions-nous résoudre ce problème? Merci.

Answer 1

Vous n'avez pas besoin de deux instances de HttpClient lorsque les intercepteurs sont appliqués à chaque fois sur chaque requête http. Je ne sais pas comment vous gérez l'état de notre application, sur la base de ce que vous pouvez juste mettre une condition dans votre intercepteur qui décidera si la demande actuelle mute ou pas. De cette façon, si la demande est déclenchée par public-site components, une en-tête Authorization ne sera pas attachée. par exemple:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    if ('your condition here if public-site components') { 
     // Just return original request 
     return next.handle(req); 
    } else { 
     // Here return modified one 
     // Get the auth header from the service. 
     const authHeader = this.auth.getAuthorizationHeader(); 
     // Clone the request to add the new header. 
     const authReq = req.clone({headers: req.headers.set('Authorization', authHeader)}); 
     // Pass on the cloned request instead of the original request. 
     return next.handle(authReq); 
    } 

    } 

Si vous ne voulez pas envoyer en-tête Authorization-api/url particulier il suffit d'utiliser req.url pour définir un filtre sur ce point.