30. Utilisation des Intercepteurs pour la modification de requêtes

Les intercepteurs HTTP sont une fonctionnalité puissante d'Angular qui permet d'intercepter les requêtes HTTP sortantes et les réponses entrantes. Ils sont parfaits pour les problématiques transversales comme l'authentification, le logging, la mise en cache ou la modification des headers.

1. Créer un intercepteur personnalisé

Une classe d'intercepteur personnalisé doit implémenter l'interface HttpInterceptor et sa méthode intercept().

Exemple : Ajouter un jeton d'autorisation (Token Auth)

typescript // auth-interceptor.ts import { Injectable } from '@angular/core'; import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http'; import { Observable } from 'rxjs';

@Injectable() export class AuthInterceptor implements HttpInterceptor { intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> { // 1. Récupérer le jeton (ex : depuis le localStorage ou un UserService) const authToken = 'MON_FAUX_JETON_JWT';

// 2. Cloner la requête et ajouter le header d'autorisation
const authReq = req.clone({
  headers: req.headers.set('Authorization', `Bearer ${authToken}`)
});

// 3. Passer la requête clonée au gestionnaire suivant
return next.handle(authReq);

} }

2. Enregistrer l'intercepteur

Les intercepteurs doivent être fournis au niveau de la racine de l'application via une configuration spéciale dans AppModule.

typescript // app.module.ts import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { AuthInterceptor } from './auth-interceptor';

@NgModule({ // ... imports et declarations providers: [ // Enregistrer l'intercepteur en utilisant le flag multi: true { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true } ], // ... }) export class AppModule { }

Angular exécute désormais AuthInterceptor pour chaque requête HTTP avant de l'envoyer au backend.