Interceptors for request modification in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an HTTP interceptor class in Angular.

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 clonedReq = req.clone({ headers: req.headers.set('[1]', 'Bearer token') });
    return next.handle(clonedReq);
  }
}

Drag options to blanks, or click blank then click option'

AAuthorization

BContent-Type

CAccept

DCache-Control

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Content-Type' instead of 'Authorization' header.

Forgetting to clone the request before modifying.

The interceptor adds an Authorization header to the HTTP request to modify it before sending.

2fill in blank

medium

Complete the code to register the interceptor in the Angular provider array.

Angular

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: [1], multi: true }
]

Drag options to blanks, or click blank then click option'

AHttpClient

BHttpRequest

CHttpHandler

DAuthInterceptor

Attempts:

3 left

💡 Hint

Common Mistakes

Using HttpClient instead of the interceptor class.

Omitting 'multi: true' which allows multiple interceptors.

You register the interceptor class AuthInterceptor to the HTTP_INTERCEPTORS token to enable it.

3fill in blank

hard

Fix the error in the interceptor method to correctly handle the request and response.

Angular

intercept(req: HttpRequest<any>, next: HttpHandler) {
  const modifiedReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer token') });
  return next.[1](modifiedReq);
}

Drag options to blanks, or click blank then click option'

Aprocess

Bhandle

Csend

Dexecute

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like 'send' or 'execute'.

Not returning the result of next.handle() causing the request to hang.

The handle method of HttpHandler forwards the modified request to the next interceptor or backend.

4fill in blank

hard

Fill both blanks to create an interceptor that adds a custom header only if the request URL contains 'api'.

Angular

intercept(req: HttpRequest<any>, next: HttpHandler) {
  if (req.url.[1]('api')) {
    const cloned = req.clone({ headers: req.headers.set('[2]', 'CustomValue') });
    return next.handle(cloned);
  }
  return next.handle(req);
}

Drag options to blanks, or click blank then click option'

Aincludes

BstartsWith

CendsWith

DAuthorization

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'contains' which is not a valid JavaScript string method.

Using 'startsWith' or 'endsWith' which only check start or end of string.

The includes method checks if 'api' is in the URL. The header added is 'Authorization' with a custom value.

5fill in blank

hard

Fill all three blanks to create an interceptor that logs the request method, URL, and then forwards the request.

Angular

intercept(req: HttpRequest<any>, next: HttpHandler) {
  console.log('Request Method:', req.[1]);
  console.log('Request URL:', req.[2]);
  return next.[3](req);
}

Drag options to blanks, or click blank then click option'

Amethod

Burl

Chandle

Dheaders

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'headers' instead of 'method' or 'url' for logging.

Calling a non-existent method instead of 'handle' on next.

The interceptor logs the method and url properties of the request, then calls handle to continue.

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