Guard In Angular 17 | Angular Authentication & Authorization | Angular 17

so welcome back to Learning Partner in this video we are going to see how we can Implement can activate guard in angular so if you have seen my some of the previous videos recently I have just uh published one video with angular 17 login so this is the project I'm using I will just explain one more time so if you see the components like I have login component layout component and the dashboard component and service I have Interceptor I I also had explained in this and let me show you the routes so we have the route structure as like this this is my default route this is the login component route then once user logged in then we navigate to dashboard component but dashboard component is a children of layout component now in layout component I have the naar so once user login layout component will be my parent component so here I'm keeping my nowar and we have a router Outlet over here and in login component I have simply made the API call to my API which uh which will get us the token and that token I'm storing into the local storage you can see like over here and once we store the Lo data into local storage we are redirecting to the dashboard page so let's just see the functionality now we are in the login page so these are the credential which I have to use to login email ID let's enter the wrong password first so you can see username and credential is wrong this is I'm getting from API side but now if I pass the correct credential let me show you the local storage also so if we go to the application locco storage So currently I don't have anything in the local storage but if I do the login continue login success so now in the local storage you can see angular 17 token key is there and with whatever the token we have got from the API so you can say this is the login API and the and in the response in the data we have got the token that token we have stored into the local storage now we know that user has logged in successfully and he is redirected to the dashboard page but let's log off now so on click off I should have cleared it but I think I have not so on log off let's say I have cleared the local storage data now user is not logged in but if I know the route name so in app route so I know like dashboard is a route name so if I if user knows the URL and if it directly enters currently user is not logged in but still I'm able to access the page API will fail because token is not going in uh in the headers but even if I'm not logged in I can still I can still able to access the D dashboard page so dashboard page should be protected means if user is logged in then only he will be access he will be allowed to access the dashboard page so we can achieve this functionality by implementing the guard so when we talk about guard we have several types of guard but out of that we will use can activate guard again I will repeat so we need to protect this route dashboard route if user is not logged in we this route should not be accessible to the particular user so this functionality we have to implement by using guard so this is an angular 17 project but same functionality will be available but now in angular 17 uh previously when you create the guard you used to get the normal service but now it is an narrow function so some extra code is there but basic logic will be same with the previous version also now so first we have to create the route uh guard so in service folder I'm creating creting guard so I'm just opening a terminal on this service folder now we have to get the command so NG generate guard and I'm just naming my guard as o guard O So once I click on enter this is a command to create a guard once you click on enter it will ask you like which kind of guard you need because we have several types of guards so you can see it is asking like which guard you need can can activate can activate child can deactivate or can match right so I need can activate so just press enter so if you see it has created the guard so by default you can see this this is nothing but an arrow function but something is imported over here can activate so once we create the guard this is the code what we get now I'm just going to add a debugger over here first I will explain like how guard work now we have created the guard now what are the route which we need to protect we have to add this guard on that route so this is my guard name this will I have to add on my route So currently this is the route I want to protect so here you have to write can activate and we have to provide the guard name so for a can acate there can be multiple guards so that's why we have to pass the guard in an aray format so now we need the import so you can see we have created the guard and that guard we have added in the particular dashboard route I just want to show you like how does it execute so now can activate in the name itself it's it will specify like before activating the route this functional will execute before activating the route this component will get will get execute let me show you that how now if I unable the debugger and I refresh so see component is not loaded it but see I got component this debugger got activated means whenever this dashboard route gets loaded your guard will be activated but now if we log to the if we navigate to the login page you won't get that debugger over there see directly page got load but if I try to access the dashboard route you will first that oard will execute see means whatever the guard you have added on which routes you have added the guard before activating this route this function will execute now means in this function we have to write the logic to check if user is logged in or not now if you see the login component how do we know like user is logged in we are working on the client side application so we have to store some data once user is logged in into local storage session storage cookies or index DB somewhere we need to store or in the service variable also but on the client side somewhere we need to to store that user is logged in so in my example I'm storing the data into local storage so if API call is Success I'm storing the data into local storage in the angular 17 token so by this local storage data I get to know like user is logged in or not so this same thing I can use in the guard also so here first I need to read the local storage data local data is equal to local storage. gate item and for get item we need to pass the key so the key will be what we are store in the in the login component so this key we need to pass it over here so what we have done we have just read the local storage data now we have to add the if condition if local data is not equal to null so if you don't have anything in the local storage with this matching Kina you will get null so we are adding the condition of not null if it is not null means in local storage we have the data so if it is not null we are just directly going to return true but if we don't have the data into the local storage means user is not logged in so in the else block we have to write some code now if the user is not logged in means in the local storage we don't have any data with this particular key we have to navigate again it back to the login page so now we have to return remove this and here first I will write the return false now here before returning false we have to navigate to the login page now from TS we have to navigate so uh in the previous version you might have seen like in the Constructor we used to create the instance of router but this is an function Arrow function so here we don't have the Constructor so we have to use the inject to create the instance of router so I'm creating a local variable constant router inject and and in inject we have to pass the router like this this is same as like this Constructor so now Constructor won't be just I'm explaining what is this equivalent to so private router colon router so whatever we have written over here this is equivalent to this but this is an arrow function so we don't have Constructor so to create the object of router you have to do like this constant local variable router is equal to inject and router we are injecting router service into this function into this local variable now you have to use this router dot now you can see whatever the functions or whatever the methods you use to get in the router that you are getting out over here router. navigate and we have to navigate back to the login page so if user is not logged in we are navigating to the dashboard page let me just add a debugger at the top so we can navigate we can check let just T this is a simplest implementation of can activate guard let's just try it now now if I refresh it is not saved I think let me save one small time my same function is coming right is not thinking the latest code let me just check if we are facing any error no let me just stop the compilation and I will start once again code is there but in the browser old old code is coming this is not coming so that's why I'm just starting compiling my application one more time Leto one more time so now you can see northard we have got the latest code So currently if you see the local storage we don't have the data in the local storage mean since user is not logged in so now in the local data you can see we have got null so if we don't get the data in the local storage with the specific key we will get null over here so that is the code we have written if it is null it will go to the else block and we are simply navigating back to the dashboard page sorry login page so you can see it has gone to the else and we are navigating back to the login page let's if we try means user is not logged in but still if we try to access the protected route again it will come back to the login page only so this is how we have protected now let's take the positive scenario let's provide the you email ID the password login on login we have stored the data into the local storage now before before navigating to the dashboard see aard got executed but now in the local data we have the data right because in after successful login we have stored the data into the local storage so that's why we are getting the data over means it is not null so it will simply return true so means we are allowing user to access the dashboard page so see now dashboard page is visible right so this is how you implement the can activate guard to protect your routes whatever the user logged in only means this is kind of a author authorization again you can add a role based check also like for particular for particular role you have access to this particular page or not user is logged in but still role based authentication is also there that we call it as authorization authentication is like checking the user credential like user is authenticated or not but authoriz authorization is like does user does logged in user has the access to that particular page or not that will come in the authorization right so again you can create another route another guard where you can check the role and the page access level again you need to write the custom code and based on that you can write in true or false so that's it with the current video this was the small video where I want to explain how to we implement the guard so this is again with the angular 17 but if it is a p old version the code will be little bit different I have already created one video that I will be sharing in the description so for old version you can refer to that but for angular 17 this is the latest implementation so that's it with the current video

Channel: LEARNING PARTNER

Views: 5,635

Keywords: angular login, angular 17 login, Authentication and Authorization in angular, Authentication in angular, Authorization in angular, guard in angular, protected route in angular, canactivate guard in angular, angular 17 guard, guard in angular 17, angular 17 login page, angular 17 login with api, angular 17 login with api integration, how to create login page in angular 17, how to create login page in angular, login page in angular, angular login page, login page angular, angular

Id: 6_tRwY52Llg

Length: 14min 6sec (846 seconds)

Published: Wed Feb 21 2024