Interceptors for request modification in Angular - Step-by-Step Execution

Concept Flow - Interceptors for request modification

HTTP Request Initiated

↓

Interceptor intercept() called

↓

Modify Request (e.g., add header)

↓

Forward Modified Request

↓

Server receives modified request

↓

Server sends response

↓

Interceptor intercept() receives response

↓

Optionally modify response

↓

Response returned to caller

When an HTTP request starts, the interceptor catches it, modifies it (like adding headers), then sends it on. The response can also be caught and changed before reaching the caller.

Execution Sample

Angular

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const cloned = req.clone({ setHeaders: { Authorization: 'Bearer token' } });
    return next.handle(cloned);
  }
}

This interceptor adds an Authorization header to every outgoing HTTP request.

Execution Table

Step	Action	Request Headers Before	Request Headers After	Next Called	Notes
1	HTTP request starts	{}	{}	No	Initial request has no headers
2	Interceptor intercept() called	{}	{}	No	Interceptor receives original request
3	Clone request adding Authorization header	{}	{Authorization: 'Bearer token'}	No	Request cloned with new header
4	Pass cloned request to next()	{Authorization: 'Bearer token'}	{Authorization: 'Bearer token'}	Yes	Modified request sent forward
5	Server receives request	{Authorization: 'Bearer token'}	{Authorization: 'Bearer token'}	Yes	Server sees added header
6	Server sends response	N/A	N/A	Yes	Response sent back
7	Interceptor receives response	N/A	N/A	Yes	Can modify response if needed
8	Response returned to caller	N/A	N/A	Yes	Caller gets final response

💡 Request sent with added Authorization header; response returned to caller.

Variable Tracker

Variable	Start	After Step 3	Final
req.headers	{}	{}	{}
cloned	undefined	HttpRequest with Authorization header	HttpRequest with Authorization header

Key Moments - 3 Insights

Why do we clone the request instead of modifying it directly?

HttpRequest objects are immutable in Angular. The interceptor must clone and modify the clone, as shown in step 3 of the execution_table.

When does the interceptor actually send the modified request?

After cloning and modifying the request, the interceptor calls next.handle(cloned) to forward it, as shown in step 4.

Can the interceptor modify the response too?

Yes, the interceptor can catch and modify the response after the server sends it, as shown in steps 7 and 8.

Visual Quiz - 3 Questions

Look at the execution_table, what headers does the request have after step 3?

A {Authorization: 'Bearer token'}

B {}

C {Content-Type: 'application/json'}

D No headers

💡 Hint

Check the 'Request Headers After' column at step 3 in the execution_table.

At which step does the interceptor forward the modified request to the next handler?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look for when 'Next Called' changes to 'Yes' in the execution_table.

If we did not clone the request before modifying, what would happen?

A The server would reject the request.

B The request would be modified successfully.

C Angular would throw an error because HttpRequest is immutable.

D The interceptor would skip sending the request.

💡 Hint

Refer to the key_moments about immutability and cloning.

Concept Snapshot

Angular HTTP Interceptors modify requests/responses.
Use intercept() method to catch requests.
Clone request to add headers (immutable objects).
Call next.handle() with modified request.
Can also modify responses before returning.
Useful for auth tokens, logging, error handling.

Full Transcript

In Angular, interceptors let you catch HTTP requests before they go out and responses when they come back. The intercept() method receives the request, which is immutable, so you clone it to add or change headers like Authorization tokens. Then you pass the cloned request to next.handle() to continue the HTTP flow. The server receives the modified request. When the response comes back, the interceptor can also catch and modify it before it reaches your code. This process helps add common headers or handle errors globally.

Practice

1. What is the main purpose of an HTTP interceptor in Angular?

easy

A. To modify HTTP requests before they are sent

B. To create new HTTP requests from scratch

C. To handle user input events

D. To style components dynamically

Solution

1. Step 1: Understand the role of interceptors

   Interceptors are designed to catch HTTP requests and responses to modify or handle them.

2. Step 2: Identify the correct purpose

   Among the options, only modifying HTTP requests before sending matches the interceptor's role.

3. Final Answer:

   To modify HTTP requests before they are sent -> Option A

4. Quick Check:

   Interceptor purpose = modify requests [OK]

Hint: Interceptors change requests before sending [OK]

Common Mistakes:

• Thinking interceptors create requests
• Confusing interceptors with event handlers
• Assuming interceptors style components

2. Which method is used to safely modify an HTTP request inside an Angular interceptor?

easy

A. req.clone()

B. req.change()

C. req.update()

D. req.modify()

Solution

1. Step 1: Recall Angular HTTP request immutability

   HTTP requests are immutable, so you cannot change them directly.

2. Step 2: Use the clone method to modify

   The correct way is to create a copy with changes using req.clone().

3. Final Answer:

   req.clone() -> Option A

4. Quick Check:

   Modify request = req.clone() [OK]

Hint: Use req.clone() to change requests safely [OK]

Common Mistakes:

• Trying to modify request directly
• Using non-existent methods like req.modify()
• Confusing clone with update or change

3. Given this interceptor code snippet, what will be the value of the 'Authorization' header in the outgoing request?

intercept(req, next) {
  const cloned = req.clone({
    setHeaders: { Authorization: 'Bearer token123' }
  });
  return next.handle(cloned);
}

medium

A. An error will occur due to incorrect syntax

B. No Authorization header will be set

C. 'token123'

D. 'Bearer token123'

Solution

1. Step 1: Analyze the clone method usage

   The code clones the request and sets the 'Authorization' header to 'Bearer token123'.

2. Step 2: Understand header setting effect

   The cloned request will have the header exactly as set, so the header value is 'Bearer token123'.

3. Final Answer:

   'Bearer token123' -> Option D

4. Quick Check:

   Header set to 'Bearer token123' [OK]

Hint: Headers set in clone appear in outgoing request [OK]

Common Mistakes:

• Assuming header is missing
• Confusing header value with token only
• Thinking syntax causes error

4. Identify the error in this Angular interceptor code:

intercept(req, next) {
  req.setHeaders({ 'Content-Type': 'application/json' });
  return next.handle(req);
}

medium

A. Missing return statement

B. req.setHeaders is not a function

C. next.handle should be called with a cloned request

D. Headers cannot be set in interceptors

Solution

1. Step 1: Check method existence on req

   The HttpRequest object is immutable and does not have a setHeaders method.

2. Step 2: Understand correct way to set headers

   Headers must be set by cloning the request with new headers using req.clone().

3. Final Answer:

   req.setHeaders is not a function -> Option B

4. Quick Check:

   setHeaders method does not exist [OK]

Hint: HttpRequest is immutable; no setHeaders method [OK]

Common Mistakes:

• Trying to call setHeaders directly
• Ignoring immutability of HttpRequest
• Thinking headers can't be changed at all

5. You want to add a custom header 'X-App-Version' with value '1.0' to all outgoing HTTP requests in your Angular app. Which is the best way to do this?

hard

A. Add the header manually in every HTTP call

B. Modify the HttpClient service to include the header

C. Create an interceptor that clones requests and sets the header, then register it globally

D. Use a component to add the header before each request

Solution

1. Step 1: Understand global header addition

   Manually adding headers everywhere is error-prone and repetitive.

2. Step 2: Use interceptor for centralized modification

   Interceptors allow modifying all requests in one place by cloning and setting headers, then registering globally.

3. Final Answer:

   Create an interceptor that clones requests and sets the header, then register it globally -> Option C

4. Quick Check:

   Global header addition = interceptor + clone + register [OK]

Hint: Use interceptor to add headers globally [OK]

Common Mistakes:

• Adding headers manually in every call
• Trying to modify HttpClient directly
• Using components for HTTP header changes