Mitä ovat HTTP interceptors?

Question

IT Interview Practice · Accepted Answer

**HTTP interceptors** sijaitsevat jokaisen `HttpClient` request/response:n keskellä, jolloin voit tarkastaa ja muuntaa niitä globaalisti. Ne ovat ihanteellinen paikka **cross-cutting concerns** -asioille, jotka koskevat kaikkia requesteja — auth-tokeneja, loggausta, virheenkäsittelyä, latausmerkkejä.

## Funktionaalinen interceptor (moderni 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
};
```

Interceptor vastaanottaa requestin ja `next`-funktion (seuraava handler). Ratkaisevasti, requestit ovat **immutable**, joten `.clone()` muuttaa ne kloonaamalla muutoksia sen sijaan, että muuttaisit ne. Tämän rekisteröiminen kerran tarkoittaa, että jokainen lähtevä request kantaa automaattisesti auth-headerin — ei tarvitse toistaa sitä jokaisessa palvelussa.

## Interceptoreiden rekisteröiminen

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

Useat interceptorit muodostavat **ketjun**, jossa kukin välittää seuraavalle — järjestys on tärkeä.

## Vastausten ja virheiden käsittely globaalisti

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

Koska interceptorit käärivät myös response Observable:n, voit käsitellä virheitä (esim. ohjaus 401:ssa, toast-näyttö) **yhdessä paikassa** koko sovellukselle.

## Interceptoreiden yleiset käyttötapaukset

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

## Miksi se on tärkeää

Interceptorit keskittävät logiikan, joka muuten olisi kopioitu jokaisen HTTP-kutsun yli — erityisesti auth-tokenien liittäminen ja virheiden käsittely globaalisti.

Tämä pitää palvelut puhtaina (ne vain tekevät requesteja) ja varmistaa johdonmukaisen käyttäytymisen koko sovelluksessa.

Auth-token ja global-error interceptorit ovat lähes universaaleja tuotanto-Angular-sovelluksissa; clone-to-modify-säännön ja ketjumallin ymmärtäminen on avain niiden oikeaan kirjoittamiseen.

Funktionaalinen interceptor (moderni Angular)

Interceptoreiden rekisteröiminen

Vastausten ja virheiden käsittely globaalisti

Interceptoreiden yleiset käyttötapaukset

Miksi se on tärkeää

Aiheeseen liittyvät kysymykset