What is Route Guard?
Angular route guards are the interfaces which can tell the router if the user has permission to access the route or not. It is used to secure the route paths by preventing users from navigation to parts of an app without authorization.
They make this decision by looking for a true or false return value from a class which implements the given guard interface.
We can generate any number of guards based on our application requirements.
5 types of guards are there
- canActivate: Implements a canActivate function that checks whether the current user has permission to activate the requested route.
- canDeactivateChild: The canActivatechild guard is very similar to canActivateGuard. We apply this guard to the parent route. The angular
- invokes this guard whenever the user tris to navigate to any of its child routes.
- canDeactive:canDeactive is an interface that is implemented by a class to create a guard which decides if a route can be deactivated.
- canLoad:Canload is a route guards to decide if a module can be loaded configured with a loadChild.
- Resolve: Resolve guards is used in the scenario where before navigating to any route we want to ensure whether there is data available or not before navigating to any route.
What is AuthGuard and how to implement it?
AuthGuard is an angular route guard used to protect the routes from unauthenticated/unauthorized people.
It is implemented using the canActivate interface which implements a canActivate function that checks whether the current user has permission to activate the requested route.
If the method returns true, then the route is activated or else if the method returns false then it will be redirected to the login page.
Step1: create a new angular app using the following command
Command: ng new <app-name>
Step2: first let’s open your created app, later create authguard with the following command
command: ng g guard <authguard-name>
Here you will get different interfaces options so you can choose what ever interface you want to implement. Here I choose CanActivate.
Step3: create a service and write a method in it.
Command: ng g s <service-name>
Once you create the service file, implement a method where you can write logic in it. Here I attached sample code, in this we get our local storage data.
Step 4: open the authguard.service.ts file which we previously created and change the code given below
The canActivate() method from authguard returns true only when the route can be navigated. In the case of a false value, navigation can be redirected to the login page. The service injects AuthService and Router and has a single method called canActivate. This method is necessary to properly implement the CanActivate interface.
The canActivate method returns a Boolean indicating whether or not navigation to a route should be allowed.
If the user isn’t authenticated, they are re-routed to some other place, in this case a route called /login.
Step5: Open app-routing.module.ts
Now the guard can be applied to any routes you want to protect
The /dashboard route has an extra value now. The AuthGuard that was created is passed to an array for canActivate which means it will be run any time someone tries to access the /dashboard route. If the user is authenticated, they get to the route. If not, they are redirected to the /login route.
In this way we can secure the route paths by preventing users from navigation to parts of an app without authorization.
Written by
Associate Software Engineer