Functional Interceptor for Secure Token Rotation

Snippet

Functional Interceptor for Secure Token Rotation

Modern Angular uses functional HTTP interceptors for a more lightweight and composable middleware architecture. This snippet demonstrates how to inject an authentication service into an interceptor to dynamically append bearer tokens to outgoing requests, a critical pattern for secure API communication.

snippet.js
javascript
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

Breakdown

export const authInterceptor: HttpInterceptorFn = (req, next) => {

Defines a stateless functional interceptor instead of a traditional class-based one.

req.clone({ setHeaders: { Authorization: `Bearer ${token}` } });

Immutably clones the request to add security headers before passing it down the chain.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Functional Interceptor for Secure Token Rotation

Related