Wat zijn HTTP-interceptors?

Question

Accepted Answer

**HTTP-interceptors** zitten in het midden van elk `HttpClient` request/response, waarmee je ze globaal kunt inspecteren en transformeren. Ze zijn de perfecte plaats voor **cross-cutting concerns** die van toepassing zijn op alle verzoeken — auth-tokens, logging, foutafhandeling, laad-indicatoren.

## Waarom het belangrijk is

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

De interceptor ontvangt het verzoek en een `next`-functie (de volgende handler). Cruciaal is dat verzoeken **immutable** zijn, dus je `.clone()` met wijzigingen in plaats van mutaties. Dit eenmaal registreren betekent dat elk uitgaand verzoek automatisch de auth-header draagt — geen herhaling in elke service.

## Interceptors registreren

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

Meerdere interceptors vormen een **ketting**, waarbij elk verzoek naar de volgende wordt doorgegeven — de volgorde is belangrijk.

## Reacties en fouten globaal afhandelen

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

Aangezien interceptors de response Observable ook omhullen, kun je fouten (bijv. redirect op 401, toast tonen) op **één plek** voor de hele app afhandelen.

## Veelgebruikte interceptor-toepassingen

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

## Waarom het belangrijk is

Interceptors centraliseren logica die anders in elk HTTP-oproep zou worden gedupliceerd — vooral het toevoegen van auth-tokens en het globaal afhandelen van fouten.

Dit houdt services schoon (ze doen alleen verzoeken) en zorgt voor consistent gedrag in de hele app.

De auth-token en global-error interceptors zijn bijna universeel in production Angular apps; het kennen van de clone-to-modify regel en het chain-model is essentieel om ze correct te schrijven.