Vad är HTTP-interceptorer?

Question

Accepted Answer

**HTTP-interceptorer** sitter i mitten av varje `HttpClient`-begäran/svar, så att du kan inspektera och omvandla dem globalt. De är den perfekta platsen för **tvärsnittskoncerner** som gäller alla begäranden — autentiseringstoken, loggning, felhantering, laddningsindikatorer.

## En funktionell interceptor (moderna 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
};
```

Interceptorn mottar begäran och en `next`-funktion (nästa hanterare). Viktigt är att begäranden är **oförändringsbara**, så du `.clone()` med ändringar istället för att mutera. Om du registrerar detta en gång betyder det att varje utgående begäran automatiskt bär autentiseringshuvudet — utan att upprepa det i varje tjänst.

## Registrering av interceptorer

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

Flera interceptorer bildar en **kedja**, där varje skickar till nästa — ordningen spelar roll.

## Hantering av svar och fel 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);
    })
  );
```

Eftersom interceptorer omsluter Observable-svaret också kan du hantera fel (t.ex. omdirigering vid 401, visa en toast) på **ett ställe** för hela appen.

## Vanliga användningsfall för 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
```

## Varför det spelar roll

Interceptorer centraliserar logik som annars skulle dupliceras över alla HTTP-anrop — viktigast är att bifoga autentiseringstoken och hantera fel globalt.

Detta håller tjänsterna rena (de gör bara begäranden) och säkerställer konsekvent beteende i hela appen.

Autentiseringstoken- och global-fel-interceptorna är nästan universella i produktions-Angular-appar; att känna till clone-to-modify-regeln och kedjmodellen är nyckeln till att skriva dem korrekt.