Episode 15 | Protecting Angular Route with Guards

hey guys this is sacred welcome to my channel say cats tutorial with router guards we can prevent users from accessing areas that they are not allowed to access or we can ask them for confirmation when leaving a certain area guards return either true if the user can access it out or false if they cannot to create a guard using CLI command line tool we can use this syntax ng g guard let's put all of our guards in guards folder then we can name the guard like auth guard press Enter now we have the auth guard in our guards folder before we use a guard we must inject that guard in F module so in our case in F module we need to inject the guard here auth guard import the file here all right now we are ready to go to use the guard if I open the earth guard file you'll see here we are implementing can activate interface where we need to define can activate function that can activate function should return either true or false or it can be observable or a promise but that observable or the promise also should return a boolean value let me implement that auth guard in our routing module so in our routing module if I want to protect this this news out then we can easily do that can activate then the card name earth guard let's import the file from cards folder all right so now we can say the news route is protected by earth guard so if earth guards can activate function returns true then only we can go to news route if the earth guards can activate returns false then we cannot access news out now let's see that in browser [Music] in browser if I click on this news tab you are saying that we are able to go to that route now let's change the value here from true to false let's save it let the page get reloaded okay now if I click on this news tab it won't work it is not taking us to the news route that is because the news out is now protected using earth guard which is returning false here now let me show you an example of role based routing card for that we can pass the data property from the route for example to access this route user must have admin role now here let me create and user object we are assuming will have this user object stored in cookie or in local storage or incessant storage or we can get the data from back-end but here we are taking a constant value so roll say admin now what we need to do here if next dot data the first roll is equal to use a roll then only you can access the route else return false in browser if I click on this new step we are able to go but if I change the user role to no admin then in the browser you will see I cannot access this new step because we don't have that role assent here this is how we can implement role based routing let's undo that and see that again if I can access news out in okay let the page gets loaded now yeah now I can access the new step okay if you look very closely here you'll see the news out has two children latest end up coming so if I prevent access of the whole news router that means we are preventing the news out as well as all of its child outs so we cannot access news less latest or new / upcoming if we want protect the children but not the parent then we have to implement can activate child interface so here what we need to do we can import can activate child interface let's implement that and define the function connect to a child alright so now in the routing we have to implement this property can activate the child alright so here now we can say we are protecting these two childs now let's see in browser I am trying to access news yeah I am able to now if I click latest or upcoming it is not taking me to that page because in card we are preventing the route how we are predicting the route here in next door data we don't have anything in the child so since there is no data it is taking you to the else part so what we need to do here we can pass data property from the child and with the role like admin same as above for upcoming save it now see in browser if I click latest it is still not taking me to that page now let's change the role here to admin now clicking on the latest tab yeah I am able to see the latest tab I'm coming as well but if I change the role for upcoming to no admin then I can go to latest but not to upcoming I hope it is very much clear to you to prevent all child routing from unnecessary access similar to can activate and can deactivate we have another function to implement here which is can deactivate usually this is used to warn people if they are navigating away from a page where they have some unsafe changes or as per your requirement if you want to warn the user before they navigate to any other page let me create another guard for this example the comment would be in GG card then girls folder and then kick ok now we have the gird created under guards folder so here we are trying to implement can deactivate function first we need to import can deactivate interface then implement that and can deactivate function to implement here so the signature would be here we can import the component from where we want to go to any other component so that component we can get here so for example we want to implement that in test component so test which is an type of test component let's import that and it would have a signature of taste component the next thing is we need to inject this card in app module and put the file all right we're ready to use our check card now let's protect our test component can deactivate check card you put the file that means we are trying to protect our test component when we try to leave the page so what we are trying to achieve is in this test component we can see there is an input element so if there is some value and then user tries to navigate to any other page it should prompt the user that we have some unzipped data are you really with to navigate to another page so first let us add a property here for example name which is the type of string [Music] the value of name is blank for now and bind that to the HTML value [Music] name now in the card we can write this statement if taste dot name is not equal to blank then we should display window dot confirm with a message there's unsaved data do you really want to navigate all right so this window that confirm returns true or false based on the user input now let's see how it works in browser so as you can see we don't have any value now if I try to navigate to any other page it is not restricting me now let's add some value here so that it can prevent me or you can show the alert okay so in in in this input element we have this value now I am trying to navigate okay so we have got this message there are some unsaved data do you really want to navigate if I click cancel it will not navigate it will it will restrict you from navigation but if I press ok that means this we needed confirm will return true and since it will return true it will success the navigation so ok yeah now we are able to see news route so that is how we can implement can deactivate function to check if there is any unsaved data in any component and then show some alert so that user is able to know that we are trying to navigate to any another page but we have some unsafe data so that's it for today if you liked this video or if this video helps you for your project then you should definitely like this one and don't forget to share this video and who has not subscribed yet please do subscribe thank you guys thanks for watching [Music]

Channel: Saikat's Tutorial

Views: 9,630

Keywords: angular 4, angular 5, angular 6, angular routing, angular guard, routing guard, router guard, unsaved data, unsaved form, child router guard, role based routing, prevent routing, auth guard angular, angular canActivate

Id: 6umBWrG2uqY

Length: 17min 21sec (1041 seconds)

Published: Sun May 27 2018

Reddit Comments

[u/semiprojake]

Is there an article or video on how to implement this same style of route guards in ionic?

[u/HellfireHD]

Is there a blog post or article? I hate watching videos for this kind of thing.