JWT Authentication & Authorization With .NET Core & Angular With HTTP Interceptor

In the last blog we learned how we can use JWT token in angular & .NET Core application there we have seen to pass the generated token we changed in a service call.

Changing the service call for adding something in the request header is not a good solution because if you want to add some new service, you need to add header changes also in that service.

To overcome this problem we need some solution where we are allowed to access every request and make changes in request calls and this is what exactly HTTP interceptors do.

The angular HTTP Interceptor was released along with the new HTTPClientModule.Interceptor helps to modify the request header before the request is sent to the back end. By intercepting the request we will get the request headers and body which enables us to modify the request before it goes to the backend.

One of the most important benefits of HTTP Interceptor is we can pass authorization tokens by catching the request.

Step 1- Create a token interceptor service

Create a service in your application that will intercept the token header and add an authorization token with it.

import { Injectable, Injector } from ‘@angular/core’
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from ‘@angular/common/http’
import { Observable } from ‘rxjs’;
@Injectable()
export class TokenInterceptorService implements HttpInterceptor {
usertoken: any;
constructor(private injector: Injector) {
}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.usertoken = sessionStorage.getItem(“token”);
let tokenizeReq = request.clone({
setHeaders: {
Authorization: ‘Bearer ‘ + this.usertoken
}
})
return next.handle(tokenizeReq);
}
}

Step 2 — Adding interceptor service in App.Module.Ts file

In import, section add details of interceptor under provider section,

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

You can check out this project example on GitHub,

VaibhavBhapkar/JWTAuthenticationInAngular_Example

Thank You, See you in the next article !!

You can reach out or connect to me over here,

LinkedIn: https://www.linkedin.com/in/vaibhav-bhapkar

Email: vaibhavbhapkar.medium@gmail.com

If you want some technical topics to be discussed with group of participants please raise a request on following link: http://myblogsenquiry.somee.com/