Angular Interceptors – Global HTTP Middleware - Learn ANGULAR | Revochamp

Name: Angular Interceptors – Global HTTP Middleware
Availability: InStock
Author: Revochamp

What are Interceptors?

Interceptors are a powerful architectural tool in Angular that allow you to sit in the middle of the communication between your application and the backend server. As a Technical Lead, you can think of them as 'Middleware' for your HTTP requests and responses. They allow you to transform outgoing requests (like adding an Auth token) or process incoming responses (like handling 401 errors) in one centralized location rather than repeating logic in every service.

Functional Interceptors (Modern Standard)

In modern Angular (v15+), interceptors are written as simple functions (HttpInterceptorFn). This is more efficient and easier to test than the older class-based approach. Because HTTP requests are immutable, you must 'clone' a request if you wish to modify it before passing it to the next handler.

TypeScriptRead-only

import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('token');

  // Clone the request to add the new header
  const authReq = req.clone({
    setHeaders: {
      Authorization: `Bearer ${token}`
    }
  });

  // Pass the cloned request instead of the original
  return next(authReq);
};

import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('token');

  // Clone the request to add the new header
  const authReq = req.clone({
    setHeaders: {
      Authorization: `Bearer ${token}`
    }
  });

  // Pass the cloned request instead of the original
  return next(authReq);
};

The Interceptor Pipeline

Interceptors form a chain. When you make a request, it passes through each interceptor in the order they were provided. When the response comes back from the server, it travels back through the same chain in reverse order.

Common Use Cases

Authentication: Automatically attaching a JWT Bearer token to every API call.
Logging: Timing how long requests take to identify slow backend endpoints.
Error Handling: Catching 401 (Unauthorized) or 500 (Server Error) responses globally to redirect users or show alerts.
Loading Spinners: Incrementing a counter when a request starts and decrementing it when it finishes to show a global progress bar.
Caching: Checking if a response for a specific URL is already in memory before hitting the network.

Registering Interceptors

Interceptors must be registered in your application configuration using the withInterceptors helper. This ensures that the Angular HttpClient knows to pipe every request through your custom functions.

TypeScriptRead-only

import { provideHttpClient, withInterceptors } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withInterceptors([loggingInterceptor, authInterceptor, errorInterceptor])
    )
  ]
};

import { provideHttpClient, withInterceptors } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withInterceptors([loggingInterceptor, authInterceptor, errorInterceptor])
    )
  ]
};

Interceptor Comparison

Feature	Class-Based (Legacy)	Functional (Modern)
Definition	Class implementing HttpInterceptor	HttpInterceptorFn
Registration	HTTP_INTERCEPTORS multi-provider	withInterceptors() array
Boilerplate	High (Requires @Injectable)	Low (Pure function)
DI Access	Constructor injection	Use the inject() function
Performance	Standard	Highly optimized / Tree-shakable

Test Your Knowledge

of 3

Which method is used to modify an outgoing HttpRequest in an interceptor?

req.update()

req.clone()

req.set()

req.modify()

of 3

What is the correct order of execution for interceptors during a response?

The same order they were registered

The reverse order they were registered

Randomly

Only the first one registered executes

of 3

Which helper function is used to add functional interceptors to the provideHttpClient provider?

addInterceptors()

useInterceptors()

withInterceptors()

injectInterceptors()

Frequently Asked Questions

Why do I have to clone the request?

HttpRequest and HttpResponse objects in Angular are immutable to ensure they are thread-safe and to prevent side effects in a reactive stream. Cloning ensures that the original request remains untouched as it moves through the pipeline.

Can I skip an interceptor for a specific request?

Yes. You can use 'HttpContext' tokens to pass metadata with a request. Your interceptor can check for a specific token (e.g., 'BYPASS_AUTH') and simply return 'next(req)' without modifying it.

What is 'next' in the interceptor function?

'next' represents the next interceptor in the chain. If there are no more interceptors, it represents the final backend handler that actually performs the HTTP request.

import { HttpInterceptorFn } from '@angular/common/http'; export const authInterceptor: HttpInterceptorFn = (req, next) => { const token = localStorage.getItem('token'); // Clone the request to add the new header const authReq = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }); // Pass the cloned request instead of the original return next(authReq); };

import { provideHttpClient, withInterceptors } from '@angular/common/http'; export const appConfig: ApplicationConfig = { providers: [ provideHttpClient( withInterceptors([loggingInterceptor, authInterceptor, errorInterceptor]) ) ] };

Feature

Class-Based (Legacy)

Functional (Modern)

Definition

Class implementing HttpInterceptor

HttpInterceptorFn

Registration

HTTP_INTERCEPTORS multi-provider

withInterceptors() array

Boilerplate

High (Requires @Injectable)

Low (Pure function)

DI Access

Constructor injection

Use the inject() function

Performance

Standard

Highly optimized / Tree-shakable

Test Your Knowledge

of 3

Which method is used to modify an outgoing HttpRequest in an interceptor?

req.update()

req.clone()

req.set()

req.modify()

of 3

What is the correct order of execution for interceptors during a response?

The same order they were registered

The reverse order they were registered

Randomly

Only the first one registered executes

of 3

Which helper function is used to add functional interceptors to the provideHttpClient provider?

addInterceptors()

useInterceptors()

withInterceptors()

injectInterceptors()

Frequently Asked Questions

Why do I have to clone the request?

Can I skip an interceptor for a specific request?

Yes. You can use 'HttpContext' tokens to pass metadata with a request. Your interceptor can check for a specific token (e.g., 'BYPASS_AUTH') and simply return 'next(req)' without modifying it.

What is 'next' in the interceptor function?

'next' represents the next interceptor in the chain. If there are no more interceptors, it represents the final backend handler that actually performs the HTTP request.

Angular Interceptors – Global HTTP Middleware

Angular Interceptors – Global HTTP Middleware

What are Interceptors?

Functional Interceptors (Modern Standard)

The Interceptor Pipeline

Common Use Cases

Registering Interceptors

Interceptor Comparison

Test Your Knowledge

Frequently Asked Questions

Need help?

Angular Interceptors – Global HTTP Middleware

Angular Interceptors – Global HTTP Middleware

What are Interceptors?

Functional Interceptors (Modern Standard)

The Interceptor Pipeline

Common Use Cases

Registering Interceptors

Interceptor Comparison

Test Your Knowledge

Frequently Asked Questions

Need help?