javascript / intermediate
Snippet
Token-Refresh-HttpInterceptor mit reaktiver Fehlerbehandlung
Funktionale HTTP-Interceptoren in Angular sichern ausgehende Anfragen ab und verwalten den Autorisierungslebenszyklus. Beim Auftreten eines 401-Unauthorized-Status pausiert der Interceptor den ursprünglichen Datenstrom, stößt eine asynchrone Token-Erneuerung an und wiederholt die fehlgeschlagene Anfrage mit aktualisierten Anmeldedaten. Schlägt die Erneuerung fehl, erzwingt catchError das Abmelden und leitet den Fehler weiter.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { HttpInterceptorFn, HttpErrorResponse } from '@angular/common/http';import { inject } from '@angular/core';import { catchError, switchMap, throwError } from 'rxjs';import { AuthService } from './auth.service';export const authRefreshInterceptor: HttpInterceptorFn = (req, next) => {const authService = inject(AuthService);return next(req).pipe(catchError((error: unknown) => {if (error instanceof HttpErrorResponse && error.status === 401 && !req.url.includes('/auth/refresh')) {return authService.refreshToken().pipe(switchMap(newToken => {const secureReq = req.clone({setHeaders: { Authorization: `Bearer ${newToken}` }});return next(secureReq);}),catchError(refreshErr => {authService.forceLogout();return throwError(() => refreshErr);}));}return throwError(() => error);}));};
angular
Erklärung
1
export const authRefreshInterceptor: HttpInterceptorFn = (req, next) => {
Definiert einen funktionalen Interceptor, der Dependency Injection mittels inject() ohne Klassen-Boilerplate nutzt.
2
if (error instanceof HttpErrorResponse && error.status === 401 && !req.url.includes('/auth/refresh')) {
Filtert nach 401-Unauthorized-Antworten und verhindert Endlosschleifen beim Refresh-Endpunkt selbst.
3
const secureReq = req.clone({ setHeaders: { Authorization: `Bearer ${newToken}` } });
Klont das unveränderliche HttpRequest-Objekt, um das neu bezogene Bearer-Authentifizierungstoken anzuhängen.