Qu'est-ce que les intercepteurs HTTP ?

Question

Accepted Answer

**Les intercepteurs HTTP** se situent au milieu de chaque requête/réponse `HttpClient`, vous permettant de les inspecter et de les transformer globalement. C'est l'endroit idéal pour les **préoccupations transversales** qui s'appliquent à toutes les requêtes — jetons d'authentification, journalisation, gestion des erreurs, indicateurs de chargement.

## Un intercepteur fonctionnel (Angular moderne)

```ts
import { HttpInterceptorFn } from "@angular/common/http";
import { inject } from "@angular/core";

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();

// requests are immutable — CLONE to modify
  const authReq = req.clone({
    setHeaders: { Authorization: `Bearer ${token}` }, // attach token to EVERY request
  });

return next(authReq); // pass the (modified) request along the chain
};
```

L'intercepteur reçoit la requête et une fonction `next` (le prochain gestionnaire). C'est crucial, les requêtes sont **immuables**, donc vous `.clone()` avec des modifications plutôt que de les muter. Enregistrer ceci une fois signifie que chaque requête sortante porte automatiquement l'en-tête d'authentification — sans le répéter dans chaque service.

## Enregistrement des intercepteurs

```ts
bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([authInterceptor, errorInterceptor, loggingInterceptor])),
  ],
});
```

Plusieurs intercepteurs forment une **chaîne**, chacun passant au suivant — l'ordre importe.

## Gestion des réponses et des erreurs globalement

```ts
import { catchError } from "rxjs/operators";
import { throwError } from "rxjs";

export const errorInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(
    catchError((err) => {
      if (err.status === 401) inject(Router).navigate(["/login"]); // global 401 handling
      inject(NotificationService).showError(err.message);
      return throwError(() => err);
    })
  );
```

Puisque les intercepteurs enveloppent aussi l'Observable de réponse, vous pouvez gérer les erreurs (par ex. redirection sur 401, afficher un toast) dans **un seul endroit** pour toute l'application.

## Utilisations courantes des intercepteurs

```text
✓ Attach auth tokens to requests
✓ Global error handling (401 → login, show notifications)
✓ Logging / analytics of all HTTP traffic
✓ Show/hide a global loading spinner
✓ Add common headers, retry logic, caching
```

## Pourquoi c'est important

Les intercepteurs centralisent la logique qui serait autrement dupliquée dans chaque appel HTTP — surtout l'attachement des jetons d'authentification et la gestion des erreurs globalement.

Cela maintient les services propres (ils font juste des requêtes) et assure un comportement cohérent dans toute l'application.

Les intercepteurs de jeton d'authentification et d'erreur globale sont quasi universels dans les applications Angular en production ; connaître la règle de clone-pour-modifier et le modèle de chaîne est essentiel pour les écrire correctement.