Articles

14 Auth Guard For Routes

July 27, 2019



alright guys so in angular when you're using the router you can actually create something called a guard that does just that a guard certain routes from certain conditions such as authentication so what we want to do is create an authentication guard making it so that we can't vision visit this dashboard if we're not logged in because we don't want this to happen so let's go and let's see I'm just gonna close up my components folder and all these and we want an extra folder in the app folder called guards okay you want to put these in a separate folder they are in fact services but we're gonna put them in a folder called guards ok we're also gonna have a register guard which we'll talk about in a little bit so inside guards I'm actually going to manually create the file off da guard dot TS ok so in this off guard TS file we're just going to put the basic service stuff we need to import our injectable package here so importan jecht Abul and that's gonna be from angular slash core and then we're gonna bring in something from the router called can activate so we want can activate actually that should be an uppercase C so can activate we also want router and that's gonna be from the angular slash router alright we also want to bring in our off module so let's say import angular fire off which is going to be from the angularfire to slash off package and then we're going to bring in our observable package all right so now what we'll do is we'll add our injectable decorator which is required to inject this as a dependency and then we need to create our class so we're going to say export class off guard and we want to say implements can activate okay that's the syntax for this if you want to use an a guard let's see we're getting an error here because if you implement can't activate you need a method called can activate and we're going to create that so don't worry about this error just yet so we're gonna have a constructor and in this constructor we're just going to inject our dependency so we want to go in the parenthesis and just put in our router so private private router set that to the router we also want the off so private AF off set that to angularfire off all right and then we're going to create that can activate let's just bring this up here nothing's gonna actually go in the constructor so we need can activate and that's gonna be it's going to return an observable and we're gonna give this a boolean it's actually going to return an observable boolean and what we want to do is return this dot this dot AF off and we're gonna call dot off state okay this is all part of the firebase authentication and then we want to call dot map okay and in this map we'll get back this auth object and we're gonna set this to a code block and we want to navigate I'm sorry first we want to test if we're logged in or not so we're gonna say if not off wait why is there did I mess up some curly braces somewhere no that looks good all right so if not off if we're not logged in then we want to get redirected back to the login page so this so we can say this dot router dot navigate and we want to go back to slash login okay we also need to return false else then we want to return true okay and if we return true that means it's going to let us go to that row now we need to attach this can activate to whatever route we want to protect whatever route that we should be logged in for which is pretty much all of them except for the login and register row but this is it that's this is the the auth guard so we can save this and what we need to do now is go to our routing module which we haven't been to in a while so app routing module and this is where we need to bring in the guard so we're gonna go right here and say import and we're going to impor it off guard from and that's gonna be in dot slash guards slash auth dot guard and then a guard is a service in so services need to be added as a provider so we need to go down here and we actually don't need this declaration so we can just trade this for providers and pass in our off guard okay and now whatever route we want to protect such as the dashboard we just want to put in an extra parameter of can activate and we want to just put in a set of brackets and put in what you guards we want to use okay and you can use more than one if you want but we just have this one all right yeah and that should work so we're just going to grab this and then we don't want to protect login or register but everything else should get this except the not found component at the bottom but we don't want the people to go to the add page if they're not logged in we don't want them to go to the edit page or the details page or the settings page so we want to add that to all of these all right and we'll go ahead and save and now you'll see that we just got booted out from the dashboard to the login if I try to go to the root which is the dashboard nope doesn't let us if I try to go to let's say client slash ad doesn't let us okay we can't go to any of these we can only go to register and login okay register isn't done yet but we can only go to these two routes because we did not add the off guard all right so it's it's pretty easy to protect your routes this is something that can be quite difficult in in a lot of other frameworks all right so what we're gonna do in the next video is do our register now I mentioned this before but when you have a like an admin panel like this something like this you don't usually want people to register you want to create a new user yourself if you want but I do want to show you how to do that how to register with firebase so what we're going to do is we're gonna have registration functionality but we're also gonna have an option in the settings to disable it so that we so that no one can register and we'll also create a guard for that as well all right so in the next video we're gonna take care of the core registration functionality and then we'll move on and create the guard and all that stuff

No Comments

Leave a Reply