Authentication in Angular- AuthGuard | CanActivate | Role Auth

hello everyone so in this today's video we're gonna learn what is guards in angular let me start things off with the definition what is route card so angular outguards are interface which can tell the router if the user has permission to access the route or not all right so this they make this reason by looking for a true or false written value like from a class which implements this given guard interface all right so there are total five types of guard the first one is can activate the second is can activate child third one is can deactivate the fourth is can load and the last one is resolve all right so in this video we're gonna focus more on this can activate okay so let me explain you by showing this this application as you can see we have this login page and if we are logging into it from an employee credential let's click on submit you can see the login is successful and we can see we have this dashboard about us contact right so let me just log out from this application and if you see if i just route from here to main slash dashboard still i'm able to access the page all right so this can be protected by using your angular guards okay let's implement that all right guys so i have already created this application hostel management where we have our this login page our main page and our signup page now let's create a shared shared folder inside which will have all our odd service and cards let me create one pod service we can do it by ng g for generate as for service and the service name with the folder where you want to keep that file we will create a odd service so in this we can see we have this our odd service file let's get this spec file as we are not doing any testing so the second thing we need is our odd guard so let's create that command is ng generate card and the card name so here it is asking me for which interface would you like to implement so we will implement can activate whenever guard is created let me remove this spec file so we have our odd guard and our service your created okay so guys uh just to tell you that we i am not implementing any jwt token here okay so the jw token has to be come from the server okay so what i'll do i will just create a a fake token here which gets stored inside our local storage so let me show you that up so if if my login is success then it will store a token inside a local storage with this with this unique name local and i'll also have a some username type which is of employee and admin here you can see we have these two types employee and admin so i'm mocking this up once i'm logging successfully inside it so this has to be done from your server not from your front end so i'll just teach you what exactly a guard is in angular so now let's let's create that service first and inside of a service we will have this method is user logged in so we'll check if the user is logged in or not so let's create a method is this will return a true or false if if the token is present or not in local storage so let's do that return so it should return a boolean so let's have this to exclamation now it will return if the token is there is bullet and true else it will return false so we have our service created or servicemen are created let's inject the service in odd card so we don't need this observable type boolean type here we just we just have our can activate method and that's it and inside it we will have a condition of true or false so this can activate basically returns a true or false based on the condition so now let's create a condition of if user is logged in or not so let's call our auth service use user logged in so what we have to do this is a condition which returns true or false from our service so now let's have this insider if condition and if the user is logged in then it should return true else what it will do it will route to your login page if the user is not authenticated then it will route the user to the login page so let's do that here by injecting router which will help shoot out user now let's call that we will navigate it to login and written false so here we have computed this can activate method so now the last step what we have to do we just have to make use of this auth card while doing routing so now go into your routing file and where you want to put this i want to put this on our main so let's have this can activate and just call pad card also import it here all right now let's save things and just run our application okay so now if you try to log in let's login into here first you can see the login is successful and we are rocketed to this dashboard page now let's try to route it from here from changing the url to main dot dashboard so now you can see i am not able to access it so it is again routed me back to the login page let's try to do that again let's do it yes so we are uh getting routed back to this because we are not logged into the page all right let's let's put a alert a lot also so that you guys can come to know it will save and let's check it so you can see we have as we have not logged in okay so now let's login into it and let's check what token we are getting so here in the the locus where you can see if that press on submit i have my token here okay and we have a user type as an employee if i try to delete this token okay and if i refresh the page you can see you have not logged in it has been routed back to the login page all right so in this way what we had did we have completed the can activate guard from here we can protect our routes okay all right guys so there can be some condition that a employee should not access this about us page or contact page okay he can only access the dashboard page so how we can do that we can do that by this angular guard so let's create a rule card now so let us have a method for a roll card let's move this unnecessary thing all right so what we'll do we will check for the rule from local storage dot get item user type so what we have to check if we if the role is admin so it will have all the access my role is equal to admin so at that point of time it will return true all right else it will alert don't have admin rights and will return a false so we have our role guard has been created now let's try to use it in our route so this route is present inside my main in the main route what i have to do i have to i don't want employee to access my about us and contact us page so let's use the can activate and have this role guard imported here do the same thing for contact us as well let's save the application and just run okay so let's try to access this by an employee credential click on submit so you can see we have locked it to the dashboard page let's try to use about us so you can see i can't use this basically i don't have admin rights so now employee cannot access this page this about us and contact page right only admin can do it so now let's try to login by an admin credential click on submit so now we can see we have we are routed to the dashboard page now now let's access about us now we can see we can use about us and contact us so only admin can use this to page so all right guys so in this day we have completed the angular authentication card by using that can activate so if you find this video helpful then you can share this with your friend and also if you have any doubt you can use the comment section below i will be there to answer you guys so that's it goodbye and keep learning

Channel: Let's Program

Views: 7,473

Keywords: angular, angular 12, angular authentication, angular auth guard, angular guard, angular role guards, guard in angular, angular tutorial, angular Authorization, angular component, angular security, angular tutorial, angular videos, learn angular, let's program, learn angular latest

Id: pZn8mCAuBDU

Length: 12min 56sec (776 seconds)

Published: Sat May 22 2021