Eine kurze Analyse der Angular-Lernroute von Route Guards

In diesem Artikel erfahren Sie mehr über die Route Guards in Angular und stellen die Methoden zum Erstellen von Route Guards, zum Steuern, ob die Route aktiviert werden kann, und zum Steuern, ob die Route verlassen werden kann, vor. Ich hoffe, dass er für alle hilfreich ist!

Umgebung:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• Knoten: 12.18.3

• npm: 6.14.6

• IDE : Visual Studio Code

In unserem tatsächlichen Geschäftsentwicklungsprozess stoßen wir häufig auf die folgenden Anforderungen:

• Muss die Zugänglichkeit bestimmter URLs einschränken, z. B. für die Systemverwaltungsschnittstelle, nur diese Nur Benutzer mit Administratorrechte können es öffnen. [Verwandte Tutorial-Empfehlung: „Angular Tutorial“]

• Wenn sich der Benutzer in der Bearbeitungsoberfläche befindet und diese verlässt, ohne zu speichern, muss der Benutzer gefragt werden, ob er die Änderung abbrechen möchte.

Angualr zielt auf das obige Szenario ab und verwendet Route Guards (Route Guards), um es zu implementieren. 路由守卫（Route Guards）来实现。

路由守卫（Route Guards）

1. 创建路由守卫

Angular CLI提供了命令行工具，可以快速创建路由守卫框架文件：ng generate guard auth。 执行后，Angular CLI会问我们需要实现哪些接口，我们直接勾选即可：

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

说明：

• CanActivate: 控制路由是否可以激活

• CanActivateChild: 控制子路由是否可以激活

• CanDeactivate: 控制路由是否可以退出

• CanLoad: 控制模块（module）是否可以被加载

比较经常使用的是1、3，分别控制进入和退出。 按照上面配置，AngularCLI自动生成如下代码，return true; 替换为我们实际的代码即可。return false; 表示不允许跳转，或者取消离开当前页面。

// 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;
  }
}

在canActivate方法中，我们还可以使用跳转。如页面判断是否已经登录，如果没有登录，跳转到Login页面：

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

2. 控制路由是否可以激活

控制路由是否可以激活，需要定义在定义路由的地方，增加canActivate属性。如果需要，还可以增加data属性， 比如告诉我们的AuthGuard进入当前路由需要验证哪些权限。data属性是可选的。

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

3. 控制路由是否退出（离开）

和控制路由是否可以激活类似，在路由定义出增加 canDeactivate

• Angular CLI bietet Befehlszeilentools, mit denen Sie schnell einen Routing Guard erstellen können Framework-Datei: ng generiert Guard Auth. Nach der Ausführung fragt uns Angular CLI, welche Schnittstellen wir implementieren müssen. Wir können es einfach direkt überprüfen:

  rrreee

  Beschreibung:

• CanActivate: Steuern Sie, ob die Route aktiviert werden kann

CanActivateChild: Steuern Sie, ob das Sub -route kann aktiviert werden

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Angular-Lernroute von Route Guards. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!