javascript / expert
Snippet
Funktionaler Interceptor für sichere Token-Rotation
Modernes Angular verwendet funktionale HTTP-Interceptoren für eine leichtgewichtigere und zusammensetzbare Middleware-Architektur. Dieses Snippet zeigt, wie ein Authentifizierungsdienst in einen Interceptor injiziert wird, um Bearer-Tokens dynamisch an ausgehende Anfragen anzuhängen – ein kritisches Muster für die sichere API-Kommunikation.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { HttpInterceptorFn, HttpRequest, HttpHandlerFn, inject } from '@angular/common/http';import { AuthService } from './auth.service';import { switchMap, take } from 'rxjs';export const authInterceptor: HttpInterceptorFn = (req, next) => {const authService = inject(AuthService);return authService.token$.pipe(take(1),switchMap(token => {const clonedReq = req.clone({setHeaders: { Authorization: `Bearer ${token}` }});return next(clonedReq);}));};
angular
Erklärung
1
export const authInterceptor: HttpInterceptorFn = (req, next) => {
Definiert einen zustandslosen funktionalen Interceptor anstelle eines traditionellen klassenbasierten.
2
req.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
Klont die Anfrage unveränderlich, um Sicherheits-Header hinzuzufügen, bevor sie in der Kette weitergereicht wird.