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 :

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 :

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 :

  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.