A brief analysis of Angular learning route by Route Guards

This article will take you to learn about Route Guards in Angular, and introduce the methods of creating route guards, controlling whether routes can be activated, and controlling whether routes can be exited. I hope it will be helpful to everyone!

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:

• It is necessary to restrict the accessibility of certain URLs. For example, for the system management interface, only those users with administrator rights can open it. [Related tutorial recommendation: "angular tutorial"]

• When the user is in the editing interface and leaves without saving, the user needs to be prompted whether to abandon the modification.

For the above scenario, Angualr uses Route Guards (Route Guards) to implement.

Route Guards

1. Create a route guard

Angular CLI provides a command line tool that can Quickly create a routing guard framework file: ng generate guard auth. After execution, Angular CLI will ask us which interfaces we need to implement, we can just check it directly:

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

Description:

• CanActivate: Controls whether the route can be activated

• CanActivateChild: Controls whether the sub-route can be activated

• CanDeactivate: Controls whether the route can exit

• CanLoad : Control whether the module can be loaded

The more commonly used ones are 1 and 3, which control entry and exit respectively. According to the above configuration, AngularCLI automatically generates the following code, return true; can be replaced with our actual code. return false; Indicates that jumping is not allowed or canceling leaving the current page.

// auth.guard.ts
import { 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<unknown> {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return true;
  }
}

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

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

2. Control whether routing can be activated

Control Whether the route can be activated needs to be defined where the route is defined and the canActivate attribute is added. If necessary, you can also add data attributes, such as telling our AuthGuard which permissions need to be verified to enter the current route. The data attribute is optional.

const routes: Routes = [
  {
    path: "page1",
    component: Page1Component,
    data: { permissions: ['YourPage1Permission'] },  // 传入参数给AuthGuard，可选
    canActivate: [AuthGuard]
  },
  {
    path: "page2",
    component: Page2omponent,
    data: { permissions: ['YourPage2Permission'] },  // 传入参数给AuthGuard，可选
    canActivate: [AuthGuard]
  }
]

3. Control whether the route exits (leave)

is similar to controlling whether the route can be activated. Add to the route definition. canDeactivate, and formulate the corresponding Guard guard. No more examples here

Summary

• Control the entry and exit of URLs through Route Guards;

• Angular CLI can assist us in creating guard files;

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of A brief analysis of Angular learning route by Route Guards. For more information, please follow other related articles on the PHP Chinese website!