Snippet

Functional Interceptors in Angular

Functional interceptors are a modern, lightweight way to handle HTTP requests and responses globally, replacing the older class-based approach.

snippet.js

javascript

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

Breakdown

const authInterceptor: HttpInterceptorFn

Defines the interceptor as a function instead of a class.

req.clone({...})

HTTP requests are immutable; we must clone them to modify headers.

return next(authReq);

Passes the modified request to the next handler in the chain.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Functional Interceptors in Angular

Related