Angular Authentication: Using Route Guard

hello everybody welcome to another video from code shots with profanize this is the second video of a series where we will see how to implement an authentication authorization in angular using jot json web token in this video we will see how to protect a route from non-authorized users or from non-authenticated users we will create a can activate guard and we will register this guard in two different routes so let's get started this is the application that we have i will type anything here any password and if i login we can see that we have the dashboard and products let's say now that we have here the dashboard i will copy this route let's open the developer tools and i could delete the profanus auth key from the application if i reload the page we can see that the user can visit the dashboard but this is not what we want to do right so we want to protect this kind of route from non-authorized non-authenticated users how can we do this we have to create a guard a can activate guard let's create it immediately i will create a schematic an angular schematic this is a guard and i will name it is authenticated ok can activate and ok confirm this is the default guard that we have and before applying any logic here immediately let's use it so i will copy the class name is authenticated guard and i will go into the app pro routing module and we're going to protect the dashboard and the products and for this reason i'm going to apply here the can activate and in the array i will paste this class name and i will do the same thing in the products so now we know that we have a logic for the dashboard and the products so let's go to the application and we can see that we can still can see the dashboard right of course and the reason is that this is dedicated guard returns true let's convert this to false let's go to the browser to see what we have if i try here to visit dashboard we have an expected result and of course this is unexpected because we didn't we didn't add any logic so let's add our logic to protect for authenticated users first we have to make sure if the user is logged in or not in the constructor i will inject the auth service and immediately we can do the following return this auth service is logged in let's see what we have we can see now we have the login and i will type anything here any password click login we can say that we have the dashboard and the products i will copy this url delete this key and just reload nice so we cannot visit dashboard we cannot visit products but we still have unexpected results what we want to see here is that if the user is not authenticated to visit the login screen so let's do this as well i will add a pipe here and in a tab i know that i have here that is logged in and i will do the following if the user is not logged in i want here to redirect the user and to apply the direction of course we have to inject the route here so this router navigate where do you want to navigate i'm going to navigate in the login screen and this should be it let's go to the browser to see what we have again type anything any password click login we can see that we have the dashboard we have the products everything seems to work fine i will delete the key and that will reload and we can see now that we no longer can visit dashboard no longer can visit products and we auto redirect it to login screen so that was it in the next videos we will use the json web token on every http call using an interceptor and we will also make sure that users with specific roles have access to particular routes please let me know what you think in the comments below and do not forget to subscribe see you in the next video

Channel: Code Shots With Profanis

Views: 1,304

Keywords: Angular guard, Angular jwt, Angular route guards, angular, angular guards, angular jwt authentication, angular protect routes, angular routes, angular tutorial, angular tutorial for beginners, authentication jwt, authentication using jwt, can activate guard, canActivate guard, guards in angular, jwt, learn angular

Id: 4dgCArSsyS4

Length: 5min 22sec (322 seconds)

Published: Fri Jul 09 2021