javascript / intermediate
Snippet
Funktionale Interceptoren in Angular
Funktionale Interceptoren sind eine moderne, leichtgewichtige Methode, um HTTP-Anfragen und -Antworten global zu verarbeiten und ersetzen den älteren klassenbasierten Ansatz.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
import { HttpInterceptorFn } from '@angular/common/http';export const authInterceptor: HttpInterceptorFn = (req, next) => {const authToken = 'your-token-here';const authReq = req.clone({setHeaders: {Authorization: `Bearer ${authToken}`}});return next(authReq);};
angular
Erklärung
1
const authInterceptor: HttpInterceptorFn
Definiert den Interceptor als Funktion anstelle einer Klasse.
2
req.clone({...})
HTTP-Anfragen sind unveränderlich; wir müssen sie klonen, um Header zu ändern.
3
return next(authReq);
Gibt die modifizierte Anfrage an den nächsten Handler in der Kette weiter.