Kaj so HTTP interceptorji?

Question

Accepted Answer

**HTTP interceptorji** se nahajajo sredi vsakega `HttpClient` zahtevka/odgovora, kar vam omogoča, da jih globalno pregledujete in transformirate. So idealno mesto za **čez-rezne skrbi**, ki veljajo za vse zahtevke — avtentifikacijske žetone, beleženje, obravnavo napak, indikatorje nalaganja.

## Funkcionalni interceptor (sodobni 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 prejme zahtevek in funkcijo `next` (naslednji rukovatelj). Ključno je, da so zahtevki **nespremenljivi**, zato `.clone()` s spremembami namesto mutiranja. Registracija tega enkrat pomeni, da vsak izhodni zahtevek samodejno nosi avtentifikacijski header — brez ponavljanja v vsakem servisу.

## Registracija interceptorjev

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

Večje interceptorjev tvori **verigo**, vsak prosledi naslednjemu — vrstni red je važen.

## Obravnava odgovorov in napak globalno

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

Ker interceptorji ovijejo tudi Observable odgovora, lahko obravnavate napake (npr. preusmeritev na 401, prikaz obvestila) na **enem mestu** za celotno aplikacijo.

## Pogoste uporabe interceptorja

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

## Zakaj je to važno

Interceptorji centralizirajo logiko, ki bi sicer bila podvojena v vseh HTTP klicih — najbolj pomembno je prilaganje avtentifikacijskih žetonov in globalna obravnava napak.

To drži storitve čiste (samo delajo zahtevke) in zagotavlja doslednost vedenja v celotni aplikaciji.

Interceptorja za avtentifikacijski žeton in globalno napako sta skoraj vsepovsod v proizvodnih aplikacijah Angular; poznavanje pravila clone-to-modify in verižnega modela je ključno za njihovo pravilno pisanje.