Hvad er HTTP interceptors?

Question

Accepted Answer

**HTTP interceptors** befinder sig i midten af hver `HttpClient` request/response, så du kan inspicere og transformere dem globalt. De er det perfekte sted for **cross-cutting concerns**, der gælder for alle requests — auth tokens, logging, fejlhåndtering, loading-indikatorer.

## En funktionel interceptor (moderne Angular)

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

Interceptoren modtager requestet og en `next` funktion (den næste handler). Afgørende er, at requests er **immutable**, så du `.clone()` med ændringer i stedet for at mutere. At registrere dette én gang betyder, at hver udgående request automatisk bærer auth-headeren — ingen grund til at gentage det i hver service.

## Registrering af interceptors

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

Flere interceptors danner en **chain**, hvor hver videregiver til den næste — rækkefølgen betyder noget.

## Håndtering af responses og fejl globalt

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

Da interceptors omslutter response Observable, kan du håndtere fejl (f.eks. omdirigering på 401, vise en toast) på **ét sted** for hele appen.

## Almindelige interceptor-brug

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

## Hvorfor det betyder noget

Interceptors centraliserer logik, som ellers ville blive duplikeret på tværs af hvert HTTP-kald — vigtigst af alt at tilføje auth tokens og håndtere fejl globalt.

Dette holder services rene (de udfører blot requests) og sikrer konsistent adfærd på tværs af appen.

Auth-token og global-error interceptors er næsten universelle i production Angular-apps; kendskab til clone-to-modify-reglen og chain-modellen er afgørende for at skrive dem korrekt.