Route Guards let you control various stages of a route navigation. While navigating from one component to another, we need to make sure that the data that will be displayed is authorized for the user, and if not, cancel the navigation.
A Router Guard can return an Observable<boolean> or a Promise<boolean>, and the router will wait for Observable to resolve to either true or false:
- If the Route Guard returns true, it will proceed with the navigation and display the view
- If the Route Guard returns false, it will abort/cancel the navigation
There are various Route Guards we can use either independently or in combinations. They are as follows:
- canActivate
- canActivateChild
- canDeactivate
- Resolve
- canLoad
The guard function can accept parameters to make a better decision. The parameters we can pass are as follows:
- component: The custom components directives...