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.