Angular canactivate guard example

they say is part 57 of Angela credit tutorial in this video well discus implementing can activate God with an example as the name implies can activate God determines if a route can be activated there are several use cases for this can activate card for example we can use it to check if the user is authenticated before allowing him to access protected areas of our application if the user is not authenticated we redirect the user to access denied component or login component similarly we can also use it to check if a specific resource he is looking for exists if the resource does not exist we redirect him to the page not found component if the resource exists we redirect the user to navigate that specific resource now let's look at an example at the moment we are on the list route and when we click on any of these employee panels we are redirected to view his details notice in the URL this one right here is the ID of the employee that we want to view there's nothing stopping the end-user from typing any ID here for example at the moment within our system we don't have an employee with ID 5 now when I try to view an employee whose details does not exist notice the page displays nothing you know we just have the shell of the page and at this point when we launch browser developer tools notice we have caught errors within the console we don't want this to happen so here is what we want to do if the employee with the specified ID in the URL exist then the navigation should be allowed to continue and view that specific employee details on the other hand if the employee does not exist then the application should redirect the user to page not found component so basically what we want to do is protect this details route with can activate card at the moment within our application we don't have page not found component so first let's go ahead and create that our application is still running so let's stop it first clear the screen now here is the command to generate a new component using angular CLI ng for angular CLI itself G for generate C for component and namor component page not found we don't want a dedicated folder for this component so I'm going to use flat option there we go our component is now created notice angular CLI not only created the required component files it also has updated the root module file app dot module dot t-- s to import this new component and add it to the declarations array so if we take a look at our project notice we have the three component files right here and with an AB dot module tortillas we have the required import statement and this new component is also added to the declarations array now let's modify the butan plate of this new component so all this component is going to say is the resource you're looking for cannot be found let's save our changes and include a route for this new component all our application routes are in the route module file a proc module dot es notice our routes are right here let's make a copy of this route and then change the bits that are required let's set the path for this new route to not found and the component is page not found component now let's style this h1 element styles are usually specified in the corresponding component CSS file so we want to style the h1 element color to be red let's save all these changes and start the server our server restarted now let's navigate to our new route notice the page doesn't display anything now let's launch browser developer tools and see what's going on notice we have an error and if we take a look at this error it says cannot match any routes that is because these routes are case sensitive and notice here we have an uppercase F so let's change that to lowercase now let's try to navigate to not found route again there we go our component is now displayed without any errors now if we take a look at the browser console notice we are still logging the router navigation events we don't want that anymore so let's remove the corresponding code the code to log the navigation events to the console is right here so let's remove this enable tracing property now let's implement can activate guard this guard should check if the employee with the specified ID in the URL exists if the employee does not exist then it should redirect the user to page not found component if the employee exists then it should allow the navigation to continue and view that specific employee details so the first step here is to create a service for can activate guard let's place the code in its own file so to the employees folder let's add a new file I'm going to name this file employee - details - guard dot service dot TS its service in angular is nothing but a class so let's implement the class I'm going to name this class employee details guard service we are implementing can activate guard so let's make this class implement can activate interface provided by angular if you recollect in part 39 of this video series we implemented can deactivate guard in that case the service class implemented can deactivate interface provided by angular right now we're implementing can activate god so the service class implements can activate interface this can activate interface has got one method for which our class needs to provide implementation to get the signature of that method let's go to the definition on this can activate interface notice this interface has got one method can activate let's copy the signature of this method and paste it with a novice service class notice this method has got two input parameters first let's import the types for both these parameters for our implementation we don't need the second parameter router State snapshot you can delete it if you want but I'm going to leave it here now if we take a look at the return type of this method notice it can return an observable of boolean promise of boolean or a simple boolean in our case let's return a simp boolean so this method returns true if the route can be activated otherwise false in our case we want to check if the employee with the specified ID exists if the employee exists then we want to return true so the route is activated if the employee does not exist then we want to redirect the user to page not found component and return false so the route is not activated to check if an employee with the specified ID exists we need employee service so let's inject it using this class constructor let's name the private field underscore employee service and the type is employee service in addition to employee service we also need the router service provided by angular this router service is required to navigate the user to page not found route if the employee with the specified ID does not exist now this class is a service class so let's decorate it with at injectable decorator so all that is left now to do is check if the employee with the specified ID exists for that we are going to make use of this employee service so within our can activate method this dot underscore employee service dot get employee so to this method we need to pass the ID of the employee to get the employee ID from the URL we can make use of this parameter right here so let's use the parameter so trout dot param app.net and the name of the parameter is ID now this get method is going to return the parameter value as a string we need to convert that to a number to do that we simply use a plus sign right here now if you look at the return type of this method it returns an employee object now what we want this to do is return true if the employee exists otherwise false so to convert the result to boolean we use two exclamation marks let's store this result in a constant I'm going to name the constant employee exists so if employee exists return true to continue route activation else we want to redirect the user to not found route so we are going to use this router service for that so let's use the router navigate method to navigate the user to not found route and then finally return false next we need to register our guard service let's do that but then the route module file I have got module dot yes so let's include our guards of his class as part of the providers array let's import this guard service the final step is to try this guard to the route that we want to guard in our case we want to guard the details route our details route is right here now to tie our guard we use can activate property and then specify our guard service employee details guard service notice we are using can deactivate property to add can deactivate guard similarly to add a connect with guard a using can activate property now let's save our changes and take a look at the browser now let's navigate to details route and specify an employee ID that exists we have an employee with ID 1 so our application should activate the route and the display employee 1 details there we go now let's specify an ID that does not exist we do not have an employee with ID 5 so our route card should redirect us to page not found component there we go there are three simple steps to implement a route guard in angular the first step is to implement the guard service class we make the guard service class implement can activate interface because we are implementing can activate guard and then provide the implementation for the interface method can activate if you are implementing candy act guard you make your service class implement can deactivate interface and provide the implementation for that interface method which happens to be can deactivate method the next step is to register our guard service with angular dependency injection system finally tie the guard to a route that you want to protect in our case we want to protect the details route that's it in this video thank you for watching and have a great day

Channel: kudvenkat

Views: 43,809

Keywords: angular canactivate example, angular 2 canactivate example, angular 4 canactivate example, angular canactivate http, angular implements canactivate, angular canactivate not called, angular canactivate parameters, angular canactivate route, angular route can activate, angular canactivate tutorial, angular 2 canactivate redirect, angular 2 router canactivate example, angular 2 canactivate guard, angular 2 canactivate guard redirect, angular 2 implements canactivate

Id: mt0VFlqrW6k

Length: 11min 34sec (694 seconds)

Published: Mon Jun 11 2018