Angular 10 Tutorial #48 - Route Guards in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to our tutorials this is angular 10 complete tutorial playlist for beginners today's topic is the most critical one i would say and i would say the most important one that you should understand if you're a beginner or even for an experienced developer because no application would be complete i mean i'm talking about real time real application with enterprise which route with so basically any serious application right will have lot of routes you will have authentication authorization in place for that you need to secure the routes and for that you need something called route guards i'm not saying you cannot build an angular application without authorization or you know authentication you can definitely do that like like if you want to build an open application you can do that but i am talking about enterprise apps mostly or any serious client work which requires you to have secure pages or secure templates the basically is any functionality that needs to be behind authentication right so that's what we call it as a route guard what is a route card it's a gatekeeper right it's the gate it it's the gateway which through which your routes will be processed or passed this is like a gatekeeper which will check if your if you are authorized if you have correct permissions to access a particular route we'll learn all about it in today's episode let's get started this is part 48 of the angular 10 complete tutorial playlist i have planned around 100 tutorials for you in this series currently we are on 48 all the previous tutorial links are in the description are in the description box below i make notes in every episode so that notes is also available in the github link please do check it out also these are all the complete list of all the tutorials i have done on angular 10 so far if you have any doubts in any of these please feel free to reach out to me in the comments section i will try and help you as much as i can listen but the best way to learn is to practice along with me so i request you to kindly start coding you will run into issues which is normal totally fine just let me know in the comments section we will resolve it together that being said today's topic is route cards so what is a route card route cards help us to prevent users from navigating to parts of an app without proper authorization authentication right which means there is some custom logic that we will write and we will check that can user access this route yes or no based on some logic right routeguards will help us to secure the route paths right in most cases the routes and screens are protected behind a good authentication system right the route card will always resolve to true or false based on some custom logic like for example you will say if the user is from a certain geography if the user is from certain department if the user is logged in if the users status has quota etc etc right so these are all different logic that we write based on our application that is what will be put in our route guard right we can generate any number of route guards in our application and there is no condition which says you should only use one or two or anything we can use any number of things it's an array okay all right so that being said um let's let me make some notes for you so that you can understand it much better right so this is episode number 48 and we are talking about route cards right so what are route guards right helps us secure our routes and screens right now think of it this way i'll give you an example right now user is trying to access a route which says admin payments right so here the user is trying to access this screen right which we can say slash admin right he's trying to access this route now we are putting a route guard or a checkpoint or a gatekeeper what this will do this we will write our custom logic here custom logic which will check if the user has this role or we will check if he is an admin if he is an admin this guard will return true or else it will written false if it is true the user can access the route if false he will be we can send him back to whichever screen we want or navigate him to home page right or log out or ask him to log in etc etc right so that's custom logic so don't worry about that right so custom redirect custom logic on failure condition right similarly so this entire journey right whether the user can access this particular link route or not is decided by this guard right so or the other way of looking up is you can think of it like this that there is a route here there is a route guard here right and the route goes here right so see this is what is your understanding if it is true send them to admin page if not send them to say home page right so user is trying to access this admins page and the route card will interject it and will based on our condition it will return true or false if the conditions are met he can access the route and he'll be taken to admin else it will give false right so this is the flow of a route card right so now let's see the other things now how do you generate a route card right so just like any other ng component or anything generate route guards so we can type ng generate we'll type guard and followed by the card name right so that's how you generate a route card now before i do this execution of step let me go and explain you little bit more route guards have something called interfaces right so there are multiple interfaces like can activate can activate child can deact weight can raise ah can low load and resolve right so these are the different interfaces which are available for the route card so what this essentially means right so this means can activate means check if the user can visit a route which means like in our example i just told you can the user access this route slash admin right can he access this path so we'll put a condition which says can activate so this will check yes you can activate or not can activate child means can the user visit routes children right so if you see the lazy loading example that we did so we have customers or payments right so if you see here let me give you that example here so if you see payments route we have payments as the main component and we have one more path which is success now here we can set and say can the user access only payments or can he also access payments slash success payment slash processing etc right so these are child routes so here we can use this interface and say can the user visit a main parent component or can also visit its child now these that is called as can activate child now what is can deactivate or let me tell you what is can load first so this is again based on the example that i just showed you on the module right so can this be loaded can a lazy loading module be loaded right that's what it means can i means can user access child routes of a parent route this means can a user access a route right can load means can i use can a lazy loaded module be accessed by this user like can should you load a module which is lazy loaded if no it will not load if yes it will load can deactivate means check to see if a user can exit a route can he leave that right so can check if user can exit the route right and finally we'll have something called resolve this is yet another property we can configure it in our routing so what it tells perform route data retrieval before route activation right so this is like um like you can say that you know route activation route data pretty well that means retrieve all the data before you actually redirect or do route resolve right like what should you do before activating a particular route that's what resolve means right i will cover all of these again individually right i will cover all of these in detail because these are extremely important advanced topics that you guys should know in coming episodes with quick examples right quick some examples and some use cases from real time use cases from real time applications that have built all right so the reason i gave you this introduction is because now we are going to generate the route card and you would see this option so i didn't want to confuse you that's why i thought i'll give you little introduction but in the coming episodes i will cover all of this in detail okay again if you have any doubts hold on to that drop them in the comments section when i cover each of this topic individually i'm sure your doubts will go away that being said let's get ahead and let's load with the route guard right so i'm going to say ng generate a guard and i'm going to keep it very very simple for now i'm going to call it call it auth right so what i'm doing i'm generating a new guard by the name auth which is nothing but authentication right so you can even call it authentication or you can just say auth in most cases that's what i've seen so follow that nomenclature all right so let's give it a couple of seconds if you're liking this tutorial please do hit the like button and subscribe button all right so now once you do that angular will give you an option which says which interfaces would you like to implement right now see this is exactly what i gave you here right can activate can activate child can deactivate can load right now for now for this episode i am selecting the first option which is can activate and i'm going to just show you simple example of how to secure it out in the coming episodes we will dig deep and implement our entire secure protection system using authentication protection everything all right so if you see here now it generated a auth guard don't worry anything about this that is for the next episode for now all you have to understand is this line line number 12. don't worry about others that will do it in the next episode today's episode is about return true or false so here this auth guard is returning true which means when we implement your your custom logic says it is true that means you should allow the user to access the route let's set to set it up all right so i have a few routes here right so what we are going to do here we will say whenever user is trying to access search right or say bad example um let's say i mean again you can take any any uh component any route doesn't matter but for your thing so i'm saying can activate and this will be an array which means it can take more than one right so remember we can implement more than one guards in our application there is no restriction since it's an array right so go to auth routing here you see can activate now here you will give your auth guard right so here i am saying now this route which is clients is protected by this guard right now what that means if this guard will return true you can access this route if it returns false you cannot access let me show you that for now if you see auth guard is returning true so let's go ahead and access slash clients so it is showing you the list of clients right because it has resolved to true now let's resolve it to false so it is now returning you false that means you cannot access now see you cannot access it will redirect you right and check console log and there are no errors right so someone can think its error no its not errors it will not allow you because the guard is telling that no you cannot access it so now you make it true and you make it clients again now you can see the client so this is where your custom logic will go into place so let's say here i will say uh let's take an uh variable and say a equal to 10 and be equal to 20 right so we are what are we doing we are saying there are two variables right um so let's just define them here and equal to zero be equal to zero right so here i am going to start a this dot b right so let us say some value right so now you can say if a is greater than let's start b right so return true else written correct so what i'm trying to show you here is that the conditions that we add right so what happens usually i'll show you first the working copy of this and then let's see that so now you try and access clients so what's your expected output it will not because a is not greater than b now i will make it hundred now see now i am going to make it clients so now i can access it because a is greater than b now what happens usually this right here you would call an http call to backend api and get auth token for user right so you get a token and you'll say user token is equal to false let's say right initially let's say you have the user token to be setting to false right now here you would say you make http call you get user token equal to true that means user is logged in now you would say if this dot user token that means if user is logged in then show him the clients you can see the clients but the moment you you say it is false now you cannot see anymore right so what happens in the login you set the user token to true and update keep getting it from that back end whether the user token is valid or not and in the log out you kill it and make it make a request again set it to log out to for true so this is how usually uh you can see how the route guard works right with can activate so you i showed you a couple of examples that you can use give it a try um like i said in the next episode i will dig deep into each of this i will explain you how each and every word that is there in this particular file out guard and what it means and how you can use it because these are the ones that you would really work when you go into any real-time application or project they expect you to know all of this knowledge right so i will help you get there okay i'm going to help you cover each and everything in detail if you like my work and tutorials please do consider buying me a coffee at buy me a coffee dot com slash art tutorials thank you so much for joining see you in the next episode we'll cover about route guards can activate thank you so much for joining see you in the next episode

Channel: ARC Tutorials

Views: 8,487

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 route guard tutorial

Id: WEqOr-clmMM

Length: 18min 37sec (1117 seconds)

Published: Sat Dec 12 2020