Cosa sono gli HTTP interceptor?

Question

IT Interview Practice · Accepted Answer

Gli **HTTP interceptor** si posizionano nel mezzo di ogni richiesta/risposta `HttpClient`, permettendoti di ispezionarle e trasformarle globalmente. Sono il posto perfetto per **cross-cutting concerns** che si applicano a tutte le richieste — token di autenticazione, logging, gestione degli errori, indicatori di caricamento.

## Un interceptor funzionale (Angular moderno)

```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'interceptor riceve la richiesta e una funzione `next` (il prossimo handler). Crucialmente, le richieste sono **immutabili**, quindi usa `.clone()` con le modifiche piuttosto che mutare. Registrare questo una sola volta significa che ogni richiesta in uscita porterà automaticamente l'header di autenticazione — senza doverlo ripetere in ogni servizio.

## Registrare gli interceptor

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

Multipli interceptor formano una **chain**, ognuno passando al successivo — l'ordine è importante.

## Gestire risposte ed errori globalmente

```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);
    })
  );
```

Poiché gli interceptor avvolgono anche l'Observable di risposta, puoi gestire gli errori (es. redirect su 401, mostrare un toast) in **un unico posto** per l'intera app.

## Usi comuni degli interceptor

```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
```

## Perché è importante

Gli interceptor centralizzano la logica che altrimenti sarebbe duplicata in ogni chiamata HTTP — soprattutto allegare token di autenticazione e gestire gli errori globalmente.

Questo mantiene i servizi puliti (fanno solo richieste) e garantisce un comportamento coerente in tutta l'app.

Gli interceptor per auth-token e global-error sono quasi universali nelle app Angular di produzione; conoscere la regola del clone-per-modificare e il modello di chain è fondamentale per scriverli correttamente.

Un interceptor funzionale (Angular moderno)

Registrare gli interceptor

Gestire risposte ed errori globalmente

Usi comuni degli interceptor

Perché è importante

Domande correlate