javascript / intermediate
Snippet
Functional HTTP Interceptors
Modern Angular promotes functional interceptors over class-based ones. They are lightweight, easier to compose, and can be registered directly in the bootstrap configuration using 'provideHttpClient'.
snippet.js
1
2
3
4
export const authInterceptor: HttpInterceptorFn = (req, next) => {const modifiedReq = req.clone({ setHeaders: { Authorization: 'Bearer token' } });return next(modifiedReq);};
angular
Breakdown
1
export const authInterceptor: HttpInterceptorFn
Declares a functional interceptor using the built-in type definition.
2
return next(modifiedReq);
Passes the cloned request with new headers to the next handler in the chain.