Co jsou HTTP interceptory?

Question

Accepted Answer

**HTTP interceptory** se nacházejí uprostřed každého `HttpClient` request/response, což vám umožňuje je globálně inspekovat a transformovat. Jsou to ideální místo pro **cross-cutting concerns**, které se vztahují na všechny požadavky — auth tokeny, logging, zpracování chyb, indikátory načítání.

## Funkční 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
};
```

Interceptor obdrží požadavek a funkci `next` (další handler). Zásadně jsou požadavky **immutable**, takže místo mutace používáte `.clone()` se změnami. Registrace tohoto jednou znamená, že každý odchozí požadavek automaticky nese auth header — není třeba jej opakovat v každé službě.

## Registrace interceptorů

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

Více interceptorů vytváří **řetězec**, kde každý předá kontrolu dalšímu — pořadí je důležité.

## Globální zpracování odpovědí a chyb

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

Protože interceptory zabalují i response Observable, můžete zpracovat chyby (např. přesměrování na 401, zobrazení toast) na **jednom místě** pro celou aplikaci.

## Běžné použití 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
```

## Proč je to důležité

Interceptory centralizují logiku, která by jinak byla duplikována v rámci každého HTTP volání — především připojování auth tokenů a globální zpracování chyb.

To udržuje služby čisté (pouze provádějí požadavky) a zajišťuje konzistentní chování v celé aplikaci.

Auth-token a global-error interceptory jsou téměř univerzální v produkčních Angular aplikacích; znalost pravidla clone-to-modify a modelu řetězce je klíčová pro jejich správné psaní.