Angular Authentication (Role based Authentication + AUTH Guard + Http Interceptor + Core API) #27

hello everyone welcome to nigeria techis in this video we are going to talk about authentication in angular application first this angular card for implementing the authentication we are going to use this angular card next to this http interceptor basically we will consume the external services that i'm supposed to pass the authorization header for that we are using this http interceptor here i am explained what are the topics we are going to cover so first we are going to implement the login concept for that i already created the application let me open my social studio code so this is the output first one is the our home page next one is customer page so we have the logout option when i clicking the logout the login page is coming but here the login from schwalte not implemented we are going to implement so now i am in the login page actually i am not logged in yet but i can able to move the home and the customer pages so let me implement the login from schwalte first this is my login component so as i mentioned here i am used the reactive form one link so here i am declared the things so first one is the username and the password there is two inputs so this is the function proceed login so here i am going to implement the logic first i need to check the form contains the values are valid or not so this dot login this is our farm name so valid okay fine if it is valid only we are going to process at the same time we have to create one service for implementing the login from surety we have the service user slash authenticate here we are passing the username and password so we are getting the output as jwt token and also the refresh token first i am going to create one service so this is our cli command my service name is authentication so i provided earth i mentioned the folder name also it will generate inside the service folder so the service is generated so the spec file is not required so we can delete it and this is our earth service so in the service i am going to inject the http client and also i am going to create one function proceed login so it has the input user correct data type is any so let me call this service this dot http and our login method is post method so here we need to pass the url so i'm going to take the ap url and i have to paste here and i'm changing into user authenticate that's fine so let me pass this url here now i need to pass the input value so user curve now we have completed our logics in the service side let me go to the components so in the we have the constructor here we need to inject the our service so private service our service name is art service when i add him here it will automatically imported in the top also here this dot service or method is proceed login so i am going to pass this form value this dot login login is our form name so i am going to pass the value only after that i need to subscribe here i need to write the lambda expression whatever the output was there it will come in the result so first i need to check whether it's null or not if it's not equal to null we can proceed further so i already declared the response data in the outside so i'm going to assign this value here value to response data if this login is successful i need to add this value into local storage for that i am using the key values token and our input is this dot response data jwt token and also one more thing after getting the success of login we need to redirect the home page so i am going to inject the router here so now i have the router so this dot route dot navigate here i need to pass the route value so i need to pass the home page so i am giving the empty value so let me try so our input is admin user and the password is admin so okay it's moved to the our home page and also i'm going to check the local storage value so inside the application we can see the token so the key is token the value is the generated jwt token so now we have implemented the login concept but still if i'm clicking the customer and home it's fine again i'm logged but i'm trying to come the homepage once again it's working fine for that we have to implement the angular card authorization concept so first i am going to create one angular card so we have the cla commands so i creating one folder shad so my card name is up it's taking some time to generate the files so when i creating the card it will ask the options like so can activate can activate child can deactivate and can load option was there so i am going to select the can active only okay fine its created here also the spec file was there it's not required so let me delete it first okay this is our card page so if you see here so many things was there but all the things are actually it's not required so let me remove all the things okay great first we need to identify whether be logged in or not for that i am going to create one method here is logged in so once we logged in we are setting values in the local storage if you don't have an value means it's not logged in so i'm going to return local storage dot get item off token nautical null if there is no data it will return false otherwise it will return true okay fine now i'm going to the card here i am going to create one constructor now i am injecting the add service here so the service was injected now i am going to implement the logic this dot service dot is logged in if it's logged in it's your positive scenario it's true else return false also we need to re redirect the login page so we need to inject the router also this dot route dot navigate the same thing we already did lion now our art card is ready i am going to add in the routing model so in the route you can see the home page and the login and the customer first i'm going to add for the customer so the path and the component was there now i'm going to include this can activate also can activate switch array format here i need to mention the art card okay fine it's added the same thing i'm going to do for the home page also so after the component i am going to add this one okay both things was fine so now i am in the login page i am trying to login admin user admin okay it's now coming to the homepage the customer page is fine i am trying to log out now i am trying to go for the homepage once again but it's logged out also customer base again it's redirecting to the login page that means our authorization console was implemented now i am going to give the actual input all right man see this is our homepage when i'm moving to the customer page in the table it's not displaying any data but actually we have some data let me show in the service here i am going to generate the token once again and i am passing here see this is our actual service so it will return three datas but when i come to the angular application so for that we have the service called customer services so in the load customer this service only it's populating the data here we are passing just an api wall only but this authorization token we are not passed so we need to pass the authorization token for implementing this logic we have the option interceptor so let me create one token interceptor here and see generate so same service only so the name i'm going to call it is here token in the scepter so okay the service is created let me delete the spec file it's not required and this is our interceptor so the token interceptor service class is generated i am going to implement http interceptor here okay now it's showing some error so i how to implement one method intercept okay it's fine here i'm going to declare jwt token basically the intercept how two inputs one is rd request and another one is the next so i'm going to use this like dot clone here set head desk inside that we have to pass authorization basically in this place we need to pass our actual token let me format it once again for getting the actual token i am going to create one more method in the service get token so this method will return the actual token in case if it is null it will return the empty value again i'm back to the interceptor here i am going to access the uh earth service both are service basically when we are calling any services we are directly booting and we can use but here both our services it may create some mismatch issue so i'm going to use the injector okay fine let me inject in the constructor private insect now let me declare a service again this dot insect dot get here i need to get to our arch service now i am going to pass the actual token here so the get token method will return the token as all we know we are when we are passing the token we supposed to use the b area so behavior some space here i am going to return next dot handle we need to pass over the jwt token now we have completed the token interceptor now we need to register in the app model side so first we need to include the http interceptors this one is already added in the place of http line model now just to come to the provider side here we need to passes the object so first value is provide http interceptor next use class so our class is token interceptor service final multiple so this interceptor can use the multiple classes so i'm going to give true for this one also so now we almost completed all our logics let me try in the browser side log out admin user admin the home page now when i click the customer page it's loading all the data now we have completed the passing authentication header to the any services and also the login concept we have implemented so implementing the authentication using the angular card we have completed the basic authentication the only thing is bending the role-based authentication so let me try that also for implementing this concept i am going to create one more angular card so the name is roll so ng generate card we already have the folder shared let me use the same for this role based authentication so we already have the token so the token contains the role related information so we are going to extract and we get the value based on that we can implement our own custom logics so here also i'm going to use the can activate only so look like it's created let me delete this part first so now i have the roll card so here also the same whatever previously we have done now i'm going to the service art service here i am going to create one function so our login token we can get from the local storage okay now i'm having the value so basically the token contains three sections the first section is payload it's not required the last is our security key the second part only it's required that only contains all the model related information so i'm going to take this one lag in token got split off the dot so i need the second part so it's done now i'm need to extract this one so i'm going to use this atop option here i need to pass this string the extract token so finally final data so equal to json dot parse out of data so we can run the application we can see actually what value is coming here console.log so the final data so for executing the method we supposed to complete some logics here here also i'm going to create one constructor first so i need to inject the service here service is same as service only and also we need to inject router also so let me do that okay both are fine now i'm going to call the particular method start service dot have access now this roll card i am going to add for the customer online so it's having the art cards i'm going to change the roll card okay let me run what value actually coming in the token extraction side so one object is coming if you see here the expiry date and the role and the unique name is admin user so we can use this role final data dot roll doubly called admin if the role is admin only can accessible for the customer model if any other role is not allowed to access so let me implement this logic here return true and if it's not i'm going to return files and also i am going to give one alert message that indicating to the user okay that's fine now i'm coming to the [Music] role card here so this method basically will return true or false only so if it's true here also true else we need to return files and also we need to redirect the home page so this dot route navigate so the empty value that's fine now we can try i'm going to log out admin user admin so it's logged in if i go to the customer i am able to access the both the pages i can able to access now i have one more credential demo user this role is actually just user only it's not an admin when i'm clicking the customer page it's showing actually the alert message it's based on the requirement online let me click ok now the role based authentication is working file still if you have any doubts or clarification please post in the comment box and also subscribe my channel if you like this video please like and share to your friends thank you

Channel: Nihira Techiees

Views: 62,944

Keywords: angular 13 tutorial complete tutorial, services in angular, how to create service in angular, how to consume services in angular, how to consume external service in angular, Authentication in Angular, how to implement authentication in angular, how to implement Authguard, how to pass jwt token from angular, pass header using Http Interceptor, how to implement login in angular, reactive forms in angular, role based authentication in angular, pass jwt token using Http Interceptor

Id: Kfzcs-d9R7k

Length: 24min 43sec (1483 seconds)

Published: Wed Jan 19 2022