Interceptors for authentication tokens in Angular - Step-by-Step Execution

Concept Flow - Interceptors for authentication tokens

HTTP Request Initiated

↓

Interceptor Captures Request

↓

Check for Auth Token

↓

Add Token

↓

Send Modified Request

↓

Server Responds

↓

Response Passed to Caller

The interceptor catches outgoing HTTP requests, adds an authentication token if available, then sends the request on. Responses pass back unchanged.

Execution Sample

Angular

intercept(req, next) {
  const token = this.authService.getToken();
  if (token) {
    const cloned = req.clone({ headers: req.headers.set('Authorization', `Bearer ${token}`) });
    return next.handle(cloned);
  }
  return next.handle(req);
}

This Angular interceptor adds a Bearer token to HTTP request headers if a token exists.

Execution Table

Step	Action	Token Present?	Request Modified?	Resulting Request Headers	Next Handler Called
1	Interceptor receives request	Yes	No	{}	No
2	Check token availability	Yes	No	{}	No
3	Clone request and add Authorization header	Yes	Yes	{ Authorization: 'Bearer abc123' }	No
4	Pass cloned request to next.handle()	Yes	Yes	{ Authorization: 'Bearer abc123' }	Yes
5	Interceptor receives request	No	No	{}	No
6	Check token availability	No	No	{}	No
7	Pass original request to next.handle()	No	No	{}	Yes

💡 Execution stops after passing request to next.handle(), either modified or original.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 6	After Step 7
token	undefined	abc123 or undefined	abc123 or undefined	abc123 or undefined	undefined	undefined
req	original request	original request	cloned request with header or original	cloned request with header or original	original request	original request

Key Moments - 2 Insights

Why do we clone the request before adding the token?

Because Angular HTTP requests are immutable, cloning creates a new request with the token header without changing the original. See execution_table step 3.

What happens if there is no token?

The interceptor passes the original request unchanged to next.handle(), as shown in execution_table steps 5-7.

Visual Quiz - 3 Questions

Look at the execution table, what headers does the request have at step 4 when a token is present?

A {}

B { Authorization: 'Token abc123' }

C { Authorization: 'Bearer abc123' }

D { Authorization: 'Bearer' }

💡 Hint

Check the 'Resulting Request Headers' column at step 4 in the execution_table.

At which step does the interceptor decide not to modify the request because no token is found?

A Step 3

B Step 6

C Step 2

D Step 7

💡 Hint

Look at the 'Token Present?' column for 'No' and see when the request is passed unchanged.

If the token changes during execution, which variable in variable_tracker reflects this change?

A token

B req

C next

D headers

💡 Hint

Check the 'token' row in variable_tracker for value changes.

Concept Snapshot

Angular HTTP Interceptors catch outgoing requests.
Check if an auth token exists.
If yes, clone request and add 'Authorization' header.
Pass modified or original request to next handler.
Immutable requests require cloning before modification.
Used to add tokens automatically for secure APIs.

Full Transcript

In Angular, interceptors let us catch every HTTP request before it goes out. We check if we have an authentication token saved. If we do, we clone the request because requests cannot be changed directly. Then we add an Authorization header with the token to the cloned request. Finally, we send this modified request forward. If no token is found, we just send the original request. This way, tokens are added automatically to all requests needing authentication.