Mik azok a HTTP interceptorok?

Question

Accepted Answer

**A HTTP interceptorok** az `HttpClient` minden kérésének/válaszának közepében ülnek, lehetővé téve, hogy globálisan ellenőrizze és átalakítsa őket. Ez a tökéletes hely az **keresztirányú problémák** kezeléséhez, amelyek minden kérésre vonatkoznak — auth tokenek, naplózás, hibakezelés, betöltési jelzők.

## Egy funkcionális interceptor (modern 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
};
```

Az interceptor megkapja a kérést és egy `next` függvényt (a következő kezelő). Döntő fontosságú, hogy a kérések **immutálisak**, ezért `.clone()`-nal módosítod, ahelyett, hogy mutálnád. Ennek egyszer való regisztrációja azt jelenti, hogy minden kimenő kérés automatikusan magában hordozza az auth fejlécet — nincs szükség az ismétlésére minden szolgáltatásban.

## Interceptorok regisztrálása

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

Több interceptor **láncot** alkot, mindegyik átadja a következőnek — a sorrend számít.

## Válaszok és hibák globális kezelése

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

Mivel az interceptorok az Observable-válaszokat is becsomagolják, a hibákat kezelheted (pl. átirányítás 401-en, toast megjelenítése) **egy helyen** az egész alkalmazásban.

## Interceptorok gyakori felhasználása

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

## Miért fontos ez

Az interceptorok központosítják azt a logikát, amelyet egyébként minden HTTP-hívásban meg kellene ismételni — legfőképpen az auth tokenek csatolása és a hibakezelés globálisan.

Ez tisztán tartja a szolgáltatásokat (csak kéréseket végeznek) és konzisztens viselkedést biztosít az alkalmazás szerte.

Az auth-token és a global-error interceptorok szinte univerzálisak az éles Angular alkalmazásokban; a klón-módosítás szabály és a lánc modell ismerete kulcsfontosságú a helyes megírásukhoz.