Was sind HTTP-Interceptors?

Question

Accepted Answer

**HTTP-Interceptors** sitzen in der Mitte jeder `HttpClient` Request/Response, sodass Sie diese global inspizieren und transformieren können. Sie sind der perfekte Ort für **Cross-Cutting Concerns**, die auf alle Requests zutreffen — Auth-Token, Logging, Fehlerbehandlung, Loading-Indikatoren.

## Ein funktionaler Interceptor (modernes 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
};
```

Der Interceptor empfängt den Request und eine `next` Funktion (der nächste Handler). Entscheidend ist, dass Requests **immutable** sind, sodass Sie mit `.clone()` ändern, anstatt zu mutieren. Das einmalige Registrieren bedeutet, dass jeder ausgehende Request automatisch den Auth-Header trägt — kein Wiederholen in jedem Service.

## Registrierung von Interceptors

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

Mehrere Interceptors bilden eine **Chain**, wobei jeder an den nächsten weitergibt — die Reihenfolge ist wichtig.

## Globale Behandlung von Responses und Fehlern

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

Da Interceptors das Response Observable umhüllen, können Sie Fehler (z. B. Umleitung bei 401, Toast anzeigen) an **einer Stelle** für die gesamte App behandeln.

## Häufige Anwendungsfälle für Interceptors

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

## Warum es wichtig ist

Interceptors zentralisieren Logik, die sonst bei jedem HTTP-Aufruf dupliziert würde — insbesondere das Anhängen von Auth-Tokens und die globale Fehlerbehandlung.

Dies hält Services sauber (sie führen einfach Requests aus) und gewährleistet konsistentes Verhalten in der gesamten App.

Auth-Token und Global-Error Interceptors sind nahezu universell in Production-Angular-Apps; das Verständnis der Clone-to-Modify-Regel und des Chain-Modells ist entscheidend für deren korrektes Schreiben.