Shulou(Shulou.com)06/02 Report--

This article mainly introduces "analyzing Angular routing guard Route Guards". In daily operation, I believe many people have doubts about analyzing Angular routing guard Route Guards. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "analyzing Angular routing guard Route Guards". Next, please follow the editor to study!

Environment:

Angular CLI: 11.0.6

Angular: 11.0.7

Node: 12.18.3

Npm: 6.14.6

IDE: Visual Studio Code

In our actual business development process, we often encounter the following requirements:

You need to restrict the accessibility of some URL, for example, for the system administration interface, only those users with administrator privileges can open it.

When the user is in the editing interface and leaves without saving, the user needs to be prompted whether to discard the changes.

For the above scenarios, Angualr is implemented using route guard (Route Guards).

Routing Guard (Route Guards)

1. Create routing Guard

Angular CLI provides a command-line tool to quickly create a routing guard framework file: ng generate guard auth. After execution, Angular CLI will ask us which APIs we need to implement, and we can check them directly:

? Which interfaces would you like to implement? (Press to select, to toggle all, to invert selection) > (*) CanActivate () CanActivateChild () CanDeactivate () CanLoad

Description:

CanActivate: controls whether routes can be activated

CanActivateChild: controls whether child routes can be activated

CanDeactivate: controls whether a route can be exited

CanLoad: whether the control module (module) can be loaded

The more frequently used are 1 and 3, which control entry and exit respectively. According to the above configuration, AngularCLI automatically generates the following code, and return true; can be replaced with our actual code. Return false; indicates that you are not allowed to jump or cancel to leave the current page.

/ / auth.guard.tsimport {Injectable} from'@ angular/core';import {CanActivate, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree} from'@ angular/router';import {Observable} from 'rxjs';@Injectable ({providedIn:' root'}) export class AuthGuard implements CanActivate, CanDeactivate {canActivate (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree {return true;}}

In the canActivate method, we can also use jumps. For example, the page determines whether you are logged in, and if not, jump to the Login page:

This.router.navigate ([/ login']); return false

two。 Controls whether routes can be activated

To control whether a route can be activated, it needs to be defined in the place where the route is defined and the canActivate attribute is added. If necessary, you can also add the data attribute, such as telling us which permissions our AuthGuard needs to verify to enter the current route. The data property is optional.

Const routes: Routes = [{path: "page1", component: Page1Component, data: {permissions: ['YourPage1Permission']}, / / pass parameters to AuthGuard, optional canActivate: [AuthGuard]}, {path: "page2", component: Page2omponent, data: {permissions: [' YourPage2Permission']}, / / input parameters to AuthGuard, optional canActivate: [AuthGuard]}]

3. Controls whether the route exits (leaves)

Similar to controlling whether the route can be activated, add canDeactivate to the route definition and make the corresponding Guard guard. There are no more examples.

At this point, the study on "analyzing Angular routing guard Route Guards" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.