# Comment accéder aux informations de l'en-tête (header) de la réponse renvoyée après l'exécution d'une requête HTTP en Angular ?

Dans nos applications `Angular`, nous sommes amenés à consommer des `APIs` (***Application Programming Interface***) fournies par un service backend via le protocole `HTTP` (***HyperText Transfer Protocol***). Pour le faire, nous implémentons le service `HttpClient` disponible dans le noyau de notre framework. Ce service `HttpClient` nous permet de faire énormément de choses et nous aborderons l'une d'entre elle dans cet article.

Supposons que nous ayons besoin de récupérer une information qui se trouve dans l'en-tête (`headers` en anglais) de la réponse à notre requête. En effet, pour des raisons de sécurité ou un besoin particulier, notre backend décide de mettre des données au niveau de l'en-tête de la réponse à notre requête. *Cette information peut être un token* `JWT` *(****JSON Web Token****), un* `cookie` *ou toute autre information cruciale pour notre logique métier*.

> **Le service** `HttpClient` **de** `Angular` **nous offre une interface appelée** `HttpInterceptor` **qui nous permet de manipuler aisément nos requêtes avant, pendant et après leur exécution.** C'est une interface très utilisée et très utile.

Voici les étapes à suivre pour récupérer une information qui se trouve au niveau de l'en-tête de la réponse :

1- ***Créer une classe qui implémente l'interface*** `HttpInterceptor` ***:***

```typescript
import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent
} from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})

export class RequestInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, 
            next: HttpHandler): Observable<HttpEvent<any>> {
  } 
}
```

* `intercept` : *c'est la méthode que nous redéfinissons à travers l'interface* `HttpInterceptor` *qui nous permet d'intercepter une requête afin d'effectuer nos traitements.*
    
* `request` : *c'est l'objet qui représente notre requête. Nous y trouverons toutes les informations en rapport avec la requête à envoyer vers notre serveur.*
    
* `next` : *c'est l'objet qui nous permet de passer à l'étape suivante après nos différents traitements afin que notre requête puisse continuer son exécution après avoir été intercepté et subi des traitements.*
    

2- ***Indiquer à notre module root qu'il doit utiliser cet intercepteur de requête*** :

```typescript
import { HTTP_INTERCEPTORS } from '@angular/common/http';
....
providers: [
....
 { provide: HTTP_INTERCEPTORS, useClass: RequestInterceptor, multi: true }
....
]
```

* `provide` : cet attribut nous permet d'indiquer que le service à exploiter c'est `HTTP_INTERCEPTORS`.
    
* `useClass` : cet attribut nous permet d'indiquer la classe à utiliser lorsque nous voulons exploiter le service `HTTP_INTERCEPTORS`. Cette classe dans notre cas est `RequestInterceptor`.
    
* `multi` : cet attribut avec sa valeur `true` nous permet de faire pointer différentes classes sur notre service à exploiter `HTTP_INTERCEPTORS`. Nous pouvons avoir plusieurs classes d'intercepteur de requêtes qui font différents traitements.
    

3- ***Ajouter la logique suivante au niveau de la méthode*** `intercept` ***pour avoir accès aux informations de l'en-tête de la réponse à notre requête HTTP*** :

```typescript
  intercept(request: HttpRequest<any>, 
            next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(request).pipe( 
    tap((event: HttpEvent<any>) => { 
      if (event instanceof HttpResponse) { 
           console.log('Http response headers : ', event.headers); 
      } 
    }), 
    catchError((error: HttpErrorResponse) => { 
      console.log('Error ', error); 
      return throwError(error); 
    }) 
  );
}
```

* `tap` : *cet opérateur* `RxJS` *nous permet de capturer un évènement* `HttpEvent` *afin de tester si cet évènement est de type* `HttpResponse`*. C'est important parce que les évènements* `HTTP` *sont multiples.*
    
* `catchError` : *cet opérateur* `RxJS` *nous permet de capturer les erreurs provenant de notre requête afin de les traiter convenablement.*
    

En somme, nous avons vu ensemble comment récupérer les informations contenues dans l'en-tête d'une réponse `HTTP` en utilisant un intercepteur de requêtes. Le service `HttpClient` que `Angular` met à notre disposition est tellement puissant qu'il faut prendre le temps de bien l'étudier.

> Pour plus d'informations :
> 
> 👉[HttpInterceptor](https://angular.io/api/common/http/HttpInterceptor)
> 
> 👉 [HttpRequest](https://angular.io/api/common/http/HttpRequest)
> 
> 👉 [HttpResponse](https://angular.io/api/common/http/HttpResponse)
> 
> 👉 [HttpErrorResponse](https://angular.io/api/common/http/HttpErrorResponse)