Hva er HTTP-interceptorer?

Question

Accepted Answer

**HTTP-interceptorer** sitter i midten av hver `HttpClient` forespørsel/respons, noe som lar deg inspisere og transformere dem globalt. De er det perfekte stedet for **cross-cutting concerns** som gjelder for alle forespørsler — auth-tokens, logging, feilhåndtering, lastingindikatorer.

## En funksjonell 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 mottar forespørselen og en `next`-funksjon (neste handler). Kritisk sett er forespørsler **immutable**, så du `.clone()` med endringer i stedet for å mutere. Å registrere dette en gang betyr at hver utgående forespørsel automatisk bærer auth-headeren — ingen repetisjon i hver tjeneste.

## Registrering av interceptorer

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

Flere interceptorer danner en **kjede**, der hver sender til neste — rekkefølgen betyr noe.

## Håndtering av svar og feil 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);
    })
  );
```

Ettersom interceptorer omslutter response Observable også, kan du håndtere feil (f.eks. omdirigering på 401, vise en toast) på **ett sted** for hele appen.

## Vanlige interceptor-bruksområder

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

Interceptorer sentraliserer logikk som ellers ville bli duplisert på tvers av hver HTTP-anrop — viktigst av alt å legge til auth-tokens og håndtere feil globalt.

Dette holder tjenester rene (de gjør bare forespørsler) og sikrer konsistent atferd i hele appen.

Auth-token- og global-error-interceptorer er nesten universelle i produksjon Angular-apper; å kjenne clone-to-modify-regelen og kjede-modellen er nøkkelen til å skrive dem riktig.