Intercepteurs dans Angular

Introduction

Dans cet article, nous allons explorer comment utiliser les intercepteurs HTTP fonctionnels avec Angular 17. Les intercepteurs permettent de manipuler les requêtes et réponses HTTP, facilitant des fonctionnalités telles que l'ajout d'en-têtes, le logging, l'authentification, et bien plus encore.

Qu'est-ce qu'un Intercepteur HTTP Fonctionnel ?

Un intercepteur HTTP fonctionnel dans Angular est une fonction middleware utilisée pour intercepter et potentiellement transformer les requêtes sortantes et les réponses entrantes. Avec Angular 17, vous pouvez utiliser HttpInterceptorFn pour créer des intercepteurs fonctionnels.

Exemple de Code

Voici un exemple simple pour illustrer comment créer un intercepteur HTTP fonctionnel :

import { HttpRequest, HttpHandlerFn, HttpInterceptorFn } from '@angular/common/http';

export const loggingInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn) => {
  console.log(`Outgoing request to URL: ${req.url}`);
  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        console.log(`Response received from URL: ${req.url} with status: ${event.status}`);
      }
    })
  );
};

Dans cet exemple, l'intercepteur logue l'URL de chaque requête sortante et la réponse correspondante.

Utilisation de l'Intercepteur

Pour utiliser cet intercepteur, vous devez le configurer lors de l'initialisation de l'application en utilisant provideHttpClient et withInterceptors :

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { AppComponent } from './app/app.component';
import { loggingInterceptor } from './app/http-interceptors/logging-interceptor';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([loggingInterceptor]))
  ]
}).catch(err => console.error(err));

Explication du Code

• HttpInterceptorFn : Un type qui représente une fonction intercepteur.
• HttpRequest : Représente la requête HTTP.
• HttpHandlerFn : Représente la fonction de gestionnaire de requêtes suivante dans la chaîne d'intercepteurs.
• next(req) : Appelle le prochain intercepteur dans la chaîne ou envoie la requête si c'est le dernier intercepteur.

Conclusion

Les intercepteurs fonctionnels dans Angular 17 offrent une manière flexible et puissante de gérer les requêtes et réponses HTTP. Ils sont particulièrement utiles pour des tâches transversales comme l'authentification, le logging, et la gestion des erreurs.

Pour plus de détails, consultez la documentation officielle d'Angular sur les intercepteurs【13†source】【14†source】.