Angular 10 Tutorial #49 - Route Guards - CanActivate in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 complete tutorial playlist for beginners in the last episode we introduced the topic called route guards we saw the use cases that are required for route cards how do we secure our application and the screens and the basically any route that is used to access our application has to be put behind a certain condition right or make it secure that's what route guards we introduced it in the last episode today we'll go one step further learn about one of the interfaces that is provided called can activate we'll learn all about it and after three episodes we are also starting forms angular forms and that's one of the most heart of the any application that we build i will cover in detail with lot of simple and as well as real time complex use cases for reactive forms template forms so that you will really master it so stay tuned for that i will try and post more than one tutorial every day so that you can catch up with that as well that being said let's get started this is part 49 of the angular 10 complete tutorial playlist uh i have like i've planned around 100 tutorials for you i've also started a mean stack tutorial parallelly which will be kind of a fork out of the learnings that we do in this particular series so make sure you check out the mean stack live project development as well the playlist link the notes are getting updated to the github link that is also in the description box below make sure you check it out as always i welcome your queries and doubts in the comments section please do reach out to me i will try and help you as much as i can i know a lot of you are reaching out on some topics that you need more help i promise i'll create those tutorials but just in a bit okay in just in time give me some time i'll create those tutorials as well for you following are the topics that i've already covered in this series um it's all available in the playlist link around 48 we have already covered this is the 49th episode where we are learning about route guards can activate interface right so quick word for our viewers who are joining us new uh so what is a route card a route card is more like a security check right or something like a conditional check where you say that can a user access a particular route right the uh the result of the route guard is a true or a false right it's a boolean value can user access this route true or false if it's true the user can access that route and internally that will point to some child component or a component but the idea is can a user access a out if he can access the route it's true if he's if for some condition if it fails like for example user is not authenticated or say user is not an admin then you'll return false if it is false the user will not be able to access that particular route that's the whole concept of route guards now like i told you in the last episode how do you generate a guard we'll use ng generate guard and give the guard name right when we do that it would give us a prompt which says which type of interface do you want to implement right so there are four types of interfaces that we can use can activate can activate child can load and can deactivate right so i will cover each one of that in detail so today we are focusing on can activate interface so what is a can activate interface so it's a guard which is useful when you want to check something before a component gets used right for example like i said it's the most basic one can the user access this route or not that's a simple can activate right that being said let me show you some hands-on examples and use cases what can be done around it so open up our application we are still working on simple crm application that we are working throughout the series go to app right now what i'm going to do is i'm going to generate a guard and we'll call it um edit guard right so maybe we want to see that if the user can edit this it's more of an admin right is an admin like check admin right so what this does is it will check if the user is an admin or not so once you hit enter it will prompt you for this selection of the four interfaces that you want to implement by default if you see the can activate is kind of selected here if you want to move you do use the up arrow or the down arrow it will move if you want to make a selection you hit this star okay you can do multiple selections but for now i am since the focus of this particular tutorial is can activate so i am selecting can activate and hit enter so now it says it has created this file which is app admin guard dot ts so if you see here you should have that file and open that and you would see this right so you have the admin card here let's check here it is admin guard this is the basic template that gets generated when we generated using the ng generate option so now there are a couple of things that needs to be understood here one that it's an injectable just like service right now this is provided in the root that means it's available throughout your application right and since we said we are doing uh implementing this interface can activate we are implementing it here and extending it right so if you see the output of this method or this method is a true by default and you don't need all this if you want if you are really not bothering about it but i will cover that little later understand how it works first so it can written a boolean it can return a url tree observable right so see so this is what it looks like so when this guard is activated it would based on some condition will decide whether to return true or false so let's say i'm going to say is admin here equal to false let's say some variable usually what happens is you would see this that we will do something like this dot admin service dot get user details right dot pipe map and you basically return this admin from the back end right so that's what we do usually in a real time scenario from the service you will get that value for now what i'm doing is i've just put it as a variable right is admin and i will check if is admin is true written true else written false right simple so see can i now what this method says is it will be like a check when the user is trying to access a particular route it would come to this method and it will check that can i access this yes or no right now go to your app routing right go to your app routing and here we will add that check right so here we can add that guard right so in your um if you see any of the um what do you call it the guards that are implemented they are implemented right with your um right with your um routing module right so what does it mean is that essentially when you have a check to be done it has to be done right in the routing file itself right so that's why make sure that you write anything in the routing file okay i hope i made it clear if not ask me your comments in the doubt i'll be more than happy to answer them okay so now that we created the admin route we have just have to update our routing file let's do that quickly so i'm saying let's say when the user is trying to access clients route right so it can be anything right it can be any route that you want to extend or any child routes that you want to access for now we are keeping it very very simple and what we are saying is in this clients right so can activate so see just when you type can right you will see the options right can activate can activate child deactivate load so select we are learning about can activate so here we will say what is the type of the guard that we are using so i will say admin card right so now what we are saying it has to be okay the reason is it's an array so i can pass more than one say if you want auth guard you can pass like this as well right so if you have multiple guards that you wanted to check it will check sequentially and give you an output whether true or false right all this have to resolve to true if you have more than one right so here i'm giving admin guard so what i'm saying whenever the user is trying to access clients he has to first pass this check that is in the active can activate admin guard okay let me start the server in the meanwhile let me also quickly put some notes for you episode 49 route guards and today we are learning about activate right so number one simple generate using ng generate guard guard underscore name right second thing um choose the option can activate right so what this does it in the routing file module we will use option can activate right so what this does is it will resolve to true or false right true means user can access the route right false means user cannot access the route that's what it means right we can use any number of route cards on can activate right so i showed you an example here if you see we can pass more than one checks right so if you want you can say like this we can pass more than one checks so this is one of the important questions that is often asked in interviews can we pass more than one guards right so yes obviously we can pass it's an array it's an array and all have to resolve to true okay so that being said um okay so that said i think we are all set so we got our application up and running so now let's quickly check it out uh so we have it here now i'm going to say slash clients and it is failing right let's see why because in our admin route card we called it false right so user cannot access it now let's make it true right so now admin is true now let's go here and say slash clients right uh okay let's slash clients so now we are able to see the clients because i'm an admin let's make it false now see now we can't see it it redirected us to the root right so that is how can activate works so connect with says can a user access it or not the answer is right here it says no you cannot access or you can access right so that is um what we just worked where is 49 yep here right so can activate it tells whether you can access a route or not right based on certain conditions obviously right that's pretty much all about can activate let me show you one more example before i leave for you which is passing multiple things so what i'm going to do now is in the in the auth guard i'm going to make it false see the token right i'm making it false here in auth guard right so now essentially what is this is returning false this is returning false right let me show you that one more time admin in admin guard it's false in auth guard it is false here right so both are false let's see that right so it's not working now what i'm going to do look carefully here in the admin guard i'm making it true right in the admin guard i'm making it true let's see it will still not work because in my routing i said both guards should return to true right now let's go ahead and in the auth guard let's make it true right and here also i'm making a true so now both are returning true value so now let's just see what happens so now i can access the route right so this is how usually uh things happen right so now if i have to talk to you little bit about the kind of use cases that happen right um that happens are number one you check if user is logged in right that's one number one check then the other check is check if user can edit the product or the order or the details or the profile or the manage screen etc also it can check if the user is an admin right so these are some of the most commonly uh implemented use cases in any or most enterprise applications right so make sure that you get this right uh i think i hope that after this your doubts about can activate are resolved if there are still any doubts let me know in the comments section i'll be more than happy to answer them in the next episode i will cover about can activate child right very similar to can activate concept but applies to the child routes i'll show you in the next episode i hope you are enjoying this series i will try and speed up i know these tutorials should be coming daily or maybe one or two in a day i will try that but please do like share comment subscribe to my channel um if you like my work and tutorials please do consider giving me a tip at buy me a coffee.com arc tutorials thank you so much for joining see in the next episode

Channel: ARC Tutorials

Views: 5,854

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular 2021 full course, Angular CanActivate tutorial

Id: 6pJMD2Yg9MQ

Length: 15min 29sec (929 seconds)

Published: Mon Jan 11 2021