Što su HTTP interceptori?

Question

Accepted Answer

**HTTP interceptori** sjede usred svakoga `HttpClient` zahtjeva/odgovora, omogućavajući vam da ih globalno pregledavate i transformirate. To je savršeno mjesto za **sveobuhvatne probleme** koji se primjenjuju na sve zahtjeve — auth tokeni, bilježenje, rukovanje greškama, indikatori učitavanja.

## Funkcionalni 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 prima zahtjev i funkciju `next` (sljedeći handler). Ključno je da su zahtjevi **nepromjenjivi**, pa `.clone()` s promjenama umjesto mutiranja. Registriranje ovoga jednom znači da svaki odlazni zahtjev automatski nosi auth zaglavlje — nije potrebno ponavljati u svakoj usluzi.

## Registriranje interceptora

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

Višestruki interceptori stvaraju **lanac**, gdje svaki prosljeđuje sljedećemu — redoslijed je bitan.

## Globalno rukovanje odgovorima i greškama

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

Budući da interceptori omotavaju i Observable odgovora, možete rukovati greškama (npr. preusmjeravanje na 401, prikaz Toast obavijesti) na **jednom mjestu** za cijelu aplikaciju.

## Česte upotrebe interceptora

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

## Zašto je to važno

Interceptori centraliziraju logiku koja bi inače bila duplirana u svakom HTTP pozivu — najvažnije je dodavanje auth tokena i globalno rukovanje greškama.

Ovo čuva servise čistima (oni samo prave zahtjeve) i osigurava konzistentno ponašanje u cijeloj aplikaciji.

Auth-token i global-error interceptori su gotovo sveprisutni u proizvodnim Angular aplikacijama; poznavanje pravila kloniranja i model lanca ključan je za njihovo ispravno pisanje.