Guard is used for guarding our critical web pages from users.
Angular is used to create single-page Web Applications. Suppose a user tries to access the page that he/she should not in the Application.
In such a scenario, a Guard will help.
The concept of the guard and Its need.
The answer is simple to prevent your application from unauthorized users.
|
Name of Guard
|
Description
|
|
canDeactivate
|
a guard deciding if a route can be deactivated for a user or not
|
|
canLoad
|
a guard deciding if children can be loaded for a user.
|
|
canActivateChild
|
a guard deciding if a child route can be activated
|
|
canActive
|
a guard deciding if a route can be activated for a user.
|
|
resolve
|
a data provider. A data provider class can be used with the router to resolve data during navigation.
|
Note:- If any guard returns a UrlTree, the current navigation is canceled and new navigation begins to the UrlTree returned from the guard.
How to implement the “canActivate” guard?
Make Sure about the routing module so don’t forget to add modules first in your project.
Step 1:- Create ”auth.guard.ts” file.
Step 2:- In the routing module implement the guard as below.
Step 3:- Testing
