Interceptors for authentication tokens in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the HTTP_INTERCEPTORS token.

Angular

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

@NgModule({
  providers: [
    { provide: [1], useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule {}

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

AHTTP_INTERCEPTORS

BHTTP_CLIENT

CHTTP_HANDLER

DHTTP_REQUEST

Attempts:

3 left

💡 Hint

Common Mistakes

Using HTTP_CLIENT instead of HTTP_INTERCEPTORS

Forgetting to set multi: true

Using HTTP_HANDLER or HTTP_REQUEST which do not exist

The HTTP_INTERCEPTORS token is used to register HTTP interceptors in Angular.

2fill in blank

medium

Complete the code to implement the intercept method signature.

Angular

intercept(req: HttpRequest<any>, [1]: HttpHandler): Observable<HttpEvent<any>> {
  // interceptor logic
}

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

Anext

Bhandler

Crequest

Dresponse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'handler' or 'request' which are not the conventional parameter names

Using 'response' which is not a parameter here

The second parameter of the intercept method is conventionally named next and is of type HttpHandler.

3fill in blank

hard

Fix the error in cloning the request with the Authorization header.

Angular

const authReq = req.[1]({
  headers: req.headers.set('Authorization', `Bearer ${token}`)
});

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

Aupdate

Bclone

Ccopy

Dmodify

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use 'modify', 'copy', or 'update' which do not exist on HttpRequest

Attempting to change the request directly without cloning

The HttpRequest object is immutable, so you must use clone() to modify it.

4fill in blank

hard

Fill both blanks to forward the cloned request.

Angular

return [1].[2](authReq);

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

Anext

Bhandle

Csend

Dprocess

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'send' or 'process' which are not methods on HttpHandler

Using wrong variable names instead of 'next'

Use next.handle(authReq) to forward the modified request to the next interceptor or backend.

5fill in blank

hard

Fill all three blanks to create and provide the interceptor class.

Angular

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

@Injectable()
export class [1] implements [2] {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = 'my-token';
    const authReq = req.clone({ headers: req.headers.set('Authorization', `Bearer ${token}`) });
    return next.[3](authReq);
  }
}

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

AAuthInterceptor

BHttpInterceptor

Chandle

DInterceptorService

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong class names like 'InterceptorService'

Not implementing the HttpInterceptor interface

Using incorrect method names instead of 'handle'

The class name is AuthInterceptor, it implements HttpInterceptor, and uses next.handle() to forward the request.