¿Qué son los HTTP interceptors?

Question

Accepted Answer

**Los HTTP interceptors** se sitúan en el medio de cada request/response de `HttpClient`, permitiéndote inspeccionar y transformarlos globalmente. Son el lugar perfecto para **cross-cutting concerns** que se aplican a todos los requests — tokens de autenticación, logging, manejo de errores, indicadores de carga.

## Un interceptor funcional (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
};
```

El interceptor recibe el request y una función `next` (el siguiente manejador). Crucialmente, los requests son **immutable**, así que haces `.clone()` con cambios en lugar de mutar. Registrar esto una sola vez significa que cada request saliente automáticamente lleva el encabezado de autenticación — sin necesidad de repetirlo en cada servicio.

## Registrando interceptors

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

Múltiples interceptors forman una **cadena**, donde cada uno pasa al siguiente — el orden importa.

## Manejando respuestas y errores 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);
    })
  );
```

Ya que los interceptors envuelven el Observable de respuesta también, puedes manejar errores (p. ej. redirigir en 401, mostrar un toast) en **un solo lugar** para toda la aplicación.

## Usos comunes de interceptors

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

## Por qué es importante

Los interceptors centralizan la lógica que de otro modo se duplicaría en cada llamada HTTP — más importante aún, adjuntar tokens de autenticación y manejar errores globalmente.

Esto mantiene los servicios limpios (simplemente hacen requests) y garantiza un comportamiento consistente en toda la aplicación.

Los interceptors de token de autenticación y error global son casi universales en las aplicaciones Angular de producción; conocer la regla de clone-to-modify y el modelo de cadena es clave para escribirlos correctamente.