How to pass JWT Token authorization header in angular using httpinterceptor | angular 13 tutorial#26

hey guys welcome to nigeria case in this video i am going to explain how to implement the http interceptor and also using this http interceptor concept i am going to pass the jwt token authorization header so we can see everything in the details first let me go to my code i am going to create one http interceptor so basically this http interceptor also the type of service only so let me create the service so ng generate and service for s so my service name is token interceptor okay great our service is created so let me open the service so as i mentioned we are going to use these services the http interceptor so i need to implement the interface of interceptor i mean the http interceptor okay done so now it's showing some error if you see uh basically the interface how the function is called intercept so we need to implement the function so using this quick fix option we can implement the intercept okay fine we have done so the function is generated uh basically we need to implement the logic here okay first let me declare the token jwt token and after that let me clone the request okay fine here actually we are passing the header so we can use the headers and our header name is authorization so basically here we are passing the token that means our jwt token so let me declare here initially i'm going to give the empty value okay fine and we are using the barrier tokens so we have to include the prefixes the barrier and some space so after that we have to pass our token let me format it after that we need to return the request so return next dot hand love here we need to pass the jwt token that's what we created the object here okay fine as of now we don't have the exact token basically we will get the token when we are logged in time we will get the token we also have the similar services let me explain the service i am already created on baby apa its called user slash authenticate here i need to pass the username and password based on that it will generate the jwt token and refresh token also so we are not going to worry about the refresh token we are just using this jwt token so let me run the service and i'm just taking this token value so in the real time application we will get once we are logged in the time as of now in this video i am planning to cover only the internal setup that's what i just hard coded that's it okay great uh now our http interceptor is ready uh load the data for customer page using the service so for loading the service also we have the service called customer so okay see it's basically an authorized because we are not passing the exact token that's what is showing the error in case if i am providing the valid token see now it will return the data so the same service we are going to consume and we are going to bind in our table so initially we don't have any data let me start from our services okay where is my service okay this is the master service here i am going to create one function so these steps are not going to take much time get customers and if you are consuming any external service we have to use the http client so let me inject the http client here return and this dot http dot get here basically we need to pass our api url so we have our ap wall here okay done now let me come to the component the component already i am having the customer list so inside the constructor here i'm going to inject the service first so once it's injected we can consume the particular function here so this dot service dot and get customer so basically it's the observable data so let me subscribe it and this dot customer list is called result okay we have done and in our html side so if you noted actually we are generating the for loop for this customer list object and we are binding the data so let me see the output now okay done now we can see the output now okay still the data's are not loaded let me verify in the network side okay for not only error see the status code is foreign actually we are requesting this url the reason is actually this is a secured service we supposed to pass the token so otherwise we cannot access the particular service that's what we are implementing the http interceptor so as of now we implemented our http interceptor at the same time we are consumed the external api in our another services but we are not past the token that means we are not included this interceptor service in our app model that's what we are facing this error so let me go to the app model this is the very important step we have to include this in the provider side so in the provider the first input is provided here we need to use the http underscore interceptor and the next one is use class for this use class we have to specify our interceptor class so our interceptor class name is token interceptor service okay great and the final thing one is multi so we are using this interceptor for multiple classes so we have done everything now we can see the output once again see now all the records are loaded the code name form actually we are binding these three things if required we can bind some additional fields also so let me go here i am going to include the one more field is called email so you know one more field was included but why the datas are not painted email okay this is the small letter that's what the data is not binded okay we have the data so let me debug also then you will get some better idea so actually i am getting all the customer related records from this apa online and be how they get method basically this will return all the records so when i am trying to refresh the screen so the request is sitting in the get method so it will return the data in case uh and our token is maybe a invalid token or else if i'm not passing the authorization header and we cannot get any values because it's completely secured apa and the one more thing is this complete ap is created using this dotted core framework so that video link also i will share in the description if you want get more details about the apa and you won't know how to implement the apa with the dotnet core framework so you can watch that video also still if you have any doubts or clarification about the http interceptor please post in my comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 17,186

Keywords: How to pass JWT Token authorization header in angular using http interceptor, implementing http interceptor, how to pass authorization header to api, how to pass token to api, how to consume secured web api, how to pass token in angular service, authentication in angular

Id: NDCJriGKgpI

Length: 10min 45sec (645 seconds)

Published: Sat Apr 16 2022