A route guard controls whether Angular navigation proceeds. Use one when a URL should not activate until the application is ready, a user is authenticated, or the user has agreed to an action. Guards belong in the route configuration; a guard class is registered as an injectable service. section 26.2 section 6.3.4
Choose the check that matches the navigation risk:
- canActivate decides whether a route opens; canActivateChild applies a check to child routes. section 26.2
- canDeactivate decides whether the current route can be left, such as when an editing form has unsaved changes. section 26.2 section 26.2.2
- A dynamic-module loading guard can ask for approval before the module is loaded for the first time. section 27.3.3
An activation guard receives an ActivatedRouteSnapshot and RouterStateSnapshot. A synchronous check can return true to allow activation or false to reject it. An asynchronous check can return a Promise<boolean> or Observable<boolean>; Angular waits for its result. Complete an Observable, or navigation keeps waiting. A guard can also redirect with Router.navigateByUrl when rejecting a route. section 26.2.2 section 6.3.4
Require authentication before opening administration
Register an AuthGuard as a provider and attach it to the administration route with canActivate. Its canActivate method checks AuthService.authenticated. If authentication is missing, it navigates to /admin/auth and returns false; otherwise, it returns true. This prevents direct navigation from triggering administration requests without a token. section 7.2.4
Protect an editing session
Attach a canDeactivate guard to the form route. When the form is being edited and is dirty, the guard asks whether to leave and returns a Promise<boolean> resolved by the user's answer. Otherwise, navigation can proceed. section 26.2.2
Test guards through the navigation path they protect: a browser reload may open a deep URL directly, bypassing earlier screens. Also account for server-side rendering: a guard that waits for an on-screen prompt cannot receive an answer during server execution, so the shown SSR adaptation allows that navigation on the server. section 6.3.4 section 27.4.5
Table 26.2. Useful routes properties for guards
|
Name
|
Description
|
|
resolve
|
This property is used to specify guards that will delay route activation until some operation has been completed, such as loading data from a server.
|
|
canActivate
|
This property is used to specify the guards that will be used to determine whether a route can be activated.
|
|
canActivateChild
|
This property is used to specify the guards that will be used to determine whether a child route can be activated.
|
|
canDeactivate
|
This property is used to specify the guards that will be used to determine whether a route can be deactivated.
|
Compare the route-configuration properties used for activation, child activation, deactivation, and resolving prerequisite work. section 26.2
