Angular Authentication: Use The JWT Token In HTTP Interceptor

hello everybody welcome to another video from code shots with profanize this is the third video of a series where we will see how to implement an authentication authorization in angular using jot in this video we will see how to use the jot token in an http header for all the http calls we will do this by implementing an http interceptor so let's get started this is how the application looks like something that we implemented in previous videos and if i type any username here and any password and click login we can see that we have the header we have the dashboard and we have the products this is what we have to solve now this is a list of products where we get from the api the server requires to receive from the client from us from the front end to receive the job token to verify that the user is authenticated as such we have to provide in every http call the token that we got during login let's create an interceptor this is the interceptor and i will name it auth i will skip test for now and confirm this is our interceptor what we have to do is the following in the intercept method i will create a new request and i'm saying that i'm creating a new request because we cannot mutate the existing request as such i will use the method clone and inside here we have to provide the headers and how can we do this request headers set and for this one we're going to set the header authorization this is the key and this should be the value and for this value inside here we have to provide the token and you know what this is how we create an interceptor it's very simple in angular to create an ncdp interceptor the question here though is how can we get the token we have the auth service which is responsible to login the user and also utilize the local storage so what we can do now is to refactor this code a bit and you know what i will create a getter and i will name it token and this getter the only thing that we will do is to return this thing return local storage get item and of course i will delete this line and i will use here this token nice something else that i do not like is that we have this two times so let's also refactor this private read-only and this is my token name and of course we have to replace with this token name here and same goes here this docker name nice since we have this and since this getter is public now we can go to the auth interceptor and in the constructor we can inject this service the oauth service and now we can replace this with the actual token this auth service and we have to get the token we are almost done since we have the interceptor we have to provide it in the app module here similar to what we have done also for the fake back-end provider so let me go here and i will copy these lines and i will go to the auth interceptor and do the same thing and i will name this of interceptor provider yes i want to provide the http interceptors token but with this class name and of course we have to use now this one this provided object the provided token we have to use it in the app module nice so let's now go to the browser to see what we have and voila we have the list of the products we send a request to the api using this token the server verified that we are authorized users authenticated users and who can get the list of the products in the next video we will make sure that users with specific roles have access to particular routes so that was it thanks for watching please let me know what you think in the comments below and do not forget to subscribe see you in the next video

Channel: Code Shots With Profanis

Views: 14,099

Keywords: Angular authentication, angular, angular authentication, angular authentication tutorial, angular authentication tutorial for beginners, angular course, angular http interceptor, angular tutorial, auth http header in angular, authentication using jwt, jwt authentication, learn angular

Id: ErToLPJHHLE

Length: 5min 28sec (328 seconds)

Published: Fri Jul 16 2021