Comment utiliser les intercepteurs sur Angular ?

L'interêt ?

Les intercepteurs HTTP sont des outils très utiles dans les applications Angular qui permettent de traiter les requêtes et les réponses HTTP avant qu'elles ne soient envoyées ou reçues par le serveur. Ils peuvent être utilisés pour ajouter, modifier ou supprimer des données dans les entêtes de la requête ou de la réponse, pour ajouter un message de chargement ou pour effectuer une action spécifique en cas d'erreur.

Voici quelques exemples d'utilisation des intercepteurs HTTP :

• Ajout d'un token d'authentification dans les entêtes de la requête, comme dans l'exemple précédent.
• Ajout d'un message de chargement lors de l'envoi d'une requête et de son masquage lors de la réception de la réponse.
• Gestion des erreurs en cas d'échec de la requête, par exemple en affichant un message d'erreur ou en redirigeant l'utilisateur vers une page d'erreur.
• Modification des données de la requête avant qu'elles ne soient envoyées, par exemple en ajoutant un préfixe à l'URL ou en convertissant les données en format JSON.

Exemple: ajouter un token dans les entêtes

Créez un nouveau service en utilisant Angular CLI ou en créant manuellement un fichier auth.interceptor.ts dans votre répertoire de services.

auth.interceptor.ts

import { HttpEvent, HttpHandlerFn, HttpHeaders, HttpRequest } from '@angular/common/http';
import { inject } from '@angular/core';
import { AuthService } from './auth.service';
import { Observable } from 'rxjs';

export function authInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
  const auth = inject(AuthService);
  const token = auth.token()

  if (!token) { 
    return next(req)
  }

  const headers = new HttpHeaders({
    Authorization: token
  })

  const newReq = req.clone({
    headers
  })

  return next(newReq)
}

auth.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  token: string | null = null;

  login() {
    // Appel à l'API pour obtenir un token d'authentification
    // Le token est stocké dans la propriété `token`
  }
}

Dans cet exemple, nous créons un intercepteur HTTP qui ajoute un token d'authentification dans les entêtes de la requête. Nous utilisons la fonction inject pour injecter le service AuthService dans l'intercepteur et obtenir le token d'authentification.

req est l'objet HttpRequest qui représente la requête HTTP à envoyer. Nous vérifions si un token d'authentification est disponible en appelant la méthode token du service AuthService. Si aucun token n'est disponible, nous renvoyons simplement la requête sans modification.

Si un token est disponible, nous créons un nouvel objet HttpHeaders avec le token d'authentification et nous clonons la requête en ajoutant les nouveaux entêtes. Nous renvoyons ensuite la nouvelle requête modifiée.

TIP

Il est recommandé de cloner la requête avant de la modifier dans un intercepteur HTTP afin de ne pas altérer la requête originale.

En effet, la requête originale peut être utilisée à plusieurs endroits dans votre application et il est important de ne pas la modifier accidentellement. En la clonant avant de la modifier, vous créez une copie de la requête originale qui peut être modifiée sans affecter la requête originale.

Il est également possible de cloner la requête en utilisant la méthode clone de l'objet HttpRequest avec des options de modification différentes, par exemple en changeant l'URL ou le type de la requête.

const modifiedReq = request.clone({
  url: 'http://mon-nouvel-url.com',
  method: 'POST'
});

Ensuite, dans votre app.config.ts, injectez authInterceptor dans la liste des fournisseurs en utilisant withInterceptors.

import { ApplicationConfig, InjectionToken } from '@angular/core';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { authInterceptor } from './auth.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withInterceptors([authInterceptor])
    )
  ]
};

Votre intercepteur est maintenant configuré et ajoutera le token d'authentification dans les entêtes de toutes les requêtes HTTP effectuées par votre application Angular.

Comment intercepter les erreurs de la requête ?

Pour intercepter les erreurs de la requête dans votre application Angular, vous pouvez utiliser un intercepteur HTTP qui attrape les erreurs de la requête et effectue une action spécifique en cas d'erreur.

import { HttpErrorResponse } from '@angular/common/http';
import { HttpRequest, HttpEvent, HttpHandlerFn } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';

export function errorInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
  return next(req).pipe(
    catchError((error: HttpErrorResponse) => {
      console.error('Erreur de la requête:', error);
      return throwError(error);
    })
  );
}

Dans cet exemple, nous utilisons l'opérateur catchError de RxJS pour attraper les erreurs de la requête et effectuer une action spécifique. Dans ce cas, nous affichons simplement l'erreur dans la console, mais vous pouvez y ajouter votre propre code de gestion de l'erreur, par exemple en affichant un message d'erreur à l'utilisateur ou en redirigeant l'utilisateur vers une page d'erreur.

Il est également recommandé de retourner l'erreur en utilisant throwError afin que la chaîne de traitement de l'erreur puisse être poursuivie et que les autres composants de votre application puissent être informés de l'erreur.

Références

• catchError et throwError