Angular Authentication Tutorial - 24 - Special Events Route Guard

all right so far we have generated the token in the backend sent it to the front-end and then stored that token in the browser but we still are not ensuring only authenticated users are able to view the special events so in this video let's add a route guard to the special events route our odd guard is nothing but a piece of code that controls navigation to and from components it can return true in which case the normal execution continues or return false in which case the navigation is stopped for our scenario if a token is present in the browser it means that the server has sent a token to the front end which can only happen if the user registers or logs in so the road guard will return true if the token is present in the browser and return false if the token is absent let's see how to implement this functionality so go back to visual studio code and first we are going to generate the route guard using the CLI so in the terminal navigate inside the angular project run the command in G G guard followed by name of the guard which is odd so you can see the two files which get generated next what we are going to do is create a method in the odd service that returns if a token exists in the local storage or not so open auth dot service dot ES and over here let's define the method I'm going to call the method as logged in and this is going to return local storage dot get item of token but we want a boolean value and not the token itself so we can simply double negate the return statement so this is always going to return either true or false if the token exists in the browser it's going to return true if it is absent it's going to return false all right now that we have the method let's use it in the odd guard to control navigation so open a guard TS and here let's start making some changes I'm going to leave the first line as it is the second line I'm going to change this to just router so import can activate comma router from angular slash router and we don't need the observable I'm going to remove that as well instead we are going to import the odd service now the odd guard is going to implement the camp activate interface so let's rewrite this can activate method so first let me inject the services so we are going to inject odd service for the logged in method and we are also going to inject the router service to control navigation now let's define the can activate method so can activate it's going to return a boolean value true or false now if this dot hot service dot logged in we return true else we're going to navigate to the login mu so this dot router dot navigate the link parameters array and then we are going to navigate to the login route and at the end return false and that's pretty much the route guard if the user is logged in in other words if the token is present it returns true so they can continue navigating to the special events route and if the user is not logged in we redirect them to the login route all right the final step is to provide this route guard in the app module and then add it to the router module so open app dot module dot TS and in the providers array at the earth guard and again make sure to import it next in the app routing module you're going to add the can activate guard to the special events route so over here I'm going to add can activate and this is going to be odd guard again make sure to import it so what is happening here is that when we try to navigate to the special events route they can activate guard is executed if it returns true navigation is allowed if it returns false however navigation is restricted so let's test it out in the browser so go back to Chrome and over here make sure that you don't have any token set in the local storage now if we try to navigate to the special events route you can see that we are not able to it gets redirected back to login so I'm going to click on members again you can see that we are not able to navigate to the special events route we get redirected back to the login route but if we log in though so a at a.com password a and login now that we have a token said we are able to navigate to the special events route I click on events I click on members you can see that we are able to navigate I'm gonna click on events again and I'm gonna clear this token so delete selected item and then now again if I try to click on members you can see that we are redirected back to login you are not able to access the members route so our authentication guard is working as expected but there is a major flaw in how we are granting access to the special events we are not verifying with the server if the token is a valid token for example I might not be a registered user but I can easily create a token in the local storage so let me go to the console and I can type local storage dot set item I'm gonna call the key as token and the value is going to be vishwas so I'm going to press Enter if I go back to application you can see that we have set a token with the value vishwas and now I can now get to the special events view you see and keep in mind I did not have to enter any user credentials so although the client side road guard is useful it is not sufficient if we just check the existence of the token we also have to verify the token in the back end to make sure it's valid so in the next video let's take a look at sending the stored token back to the server for verification

Channel: Codevolution

Views: 119,908

Rating: 4.9135914 out of 5

Keywords: Angular, Angular Authentication Tutorial for Beginners, Route Guard, Angular Authentication Tutorial, Angular Tutorial

Id: 7L80dKtfHe0

Length: 7min 24sec (444 seconds)

Published: Mon Apr 09 2018