how to pass authorization header/ JWT Token in angular services | consume .NET Core secured API

hey guys good morning welcome to nigeria techies this is our angular 14 series part of this video i am going to explain how to pass this authorization header in angular services basically we can achieve this from sold in these two ways the first one is individual way that means we are passing this authorization header for each and every request in this services and the second one is global b that means we are going to implement on http interceptor using this interceptor we can pass our authorization header okay now let me start our implementation already i have the created application here i'm going to use this app component and also the services master dot services here let me create one function first using this function i am going to get all the employee records also let me inject our http client okay we are good to go now this dot http and our method type is get method online here i suppose to pass our ap url so already i'm having one.net core services so let me explain this one so this is the employee services so it's returning for not one because the service is secured on so let me copy this url okay this is done and the next step is b how to pass our authorization header before that let me test our services in postman the same service here also we are getting this for not only error so let me pass this authorization header here okay we already have one method for generating this jwt token so let me generate our token first okay great the token is generated so let me copy this one and our token type is barrier token space then our token now let me request once again see now i'm getting this response is 200 and also i'm getting this list of employee record the same from swelty only we are going to apply in our angular application so let me go to the application now here i am going to declare one object http options okay if you noted in this get method you can see like the first input is url that's what we have password and the second one is options the http option so using this option only we are going to pass our authorization header first let me define our authorization header then we can pass here okay dot set okay here i am going to use the key is authorization and the value is b error because our token type is bearer only so after that we have to pass our token so basically when we are logged in that time only we will get our token for this example i am going to use the direct token so that we can get from our swagger itself so it's having 20 minutes expiration time so no issue we can use the same token so let me pass it here now i'm going to use this header option i just passed this parameter that's it ok great our service said we have done now let me go to the component side so in this component i am going to create one table so in this table we can bind the same information okay the column names are code name and also i'm going to use this salary if you have any other field also we can include so this is the just learning purpose so i think we have this email and phone number we don't have this salary so let me change this one into email okay that's fine so in the body i'm going to use this tr tag now let me go to the ts file side so in the ts file side we have this constructor and master service is already injected now let me define one option first then in this constructor side i am going to consume our services get employee so it's returning wide so let me go back to our services okay let me return it okay fine now see it's returning this observable data so i'm going to subscribe it okay now we have the data in our mdate object i am going to bind in this table okay the first field is code item.code the similar way the second one is name and the final one is email and this table i'm going to provide the class table and table border these are the bootstrap class see now all the details are loaded here the code name email okay so in case if i'm not past this token here it will never happen so let me remove this one now see none of the data are loaded if you go to the console side you can see this four not one another hd error okay see we are getting this for not only error so let me revert the changes now it's fine it's loaded the data okay great now we have completed our first time and now let me move on the second type how to pass this authorization header using this http interceptor so the http industry also the kind of service only so let me create it nc generate service okay create the services created here i'm going to implement the http interceptor using this quick fix option okay the intercept method is added now let me remove this exception throw so instead of that i am going to return the our request okay so our main intention is be how to pass our authorization header okay for that let me define one object token header so this request that loan off and here i'm going to use the set headers option and our token type is authorization token and the token type is brr undone space finally the token is required so we already have the token now let me use this same token okay this is fine so here after i am going to return this token header and this is the first step we have initiated our http header now let me use this http interceptor in our application for that in this app model we have this providers option here i'm going to use this provide http interceptor and use class this use class is nothing but our created service name online token interceptor services finally we are going to use this services for the multiple places so the multi also true okay we have done so let me verify it how it's going to work now let me go to the master services so in this master services i am going to create one more function get customer okay return this dot http get and our url let me go to the swagger this swagger we have this customer okay here also i'm getting this format on error because this one also yeah secured services let me add here and in this component side what i'm going to do let me copy the whole table and this is for our customer okay and let me verify what are the fields we are having id name email so instead of this code i am going to change into id so instead of the same data i'm going to use customer data now let me go to our ts site we can follow the same steps first initiated our object so after that we can consume our customer services get customer so this dot customer data equal to the response okay see now our customer data is loaded at the same time our employee data also loaded if you noted here in this simple method we are passing this token but in this customer we not passed the token but it's working why because we have implemented our http interceptor it will work for all the services in case if i'm removing here also okay even this employee method also i just removed so let me command it it will work because we are passing our authorization header through our http interceptor so let me uncomment it so this is all about our video still if you have any doubts or clarifications please post in the comment box and also please don't forget to subscribe my channel and the source code i will share this github link in this description you can use it and if it's possible you have to join our membership thank you thanks for watching

Channel: Nihira Techiees

Views: 7,144

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, how to pass authorization token individual request, how to pass token selected services, pass authorization header in angular services

Id: Q8s0CYhnHgM

Length: 14min 39sec (879 seconds)

Published: Wed Aug 31 2022