Une brève analyse du parcours d'apprentissage angulaire par Route Guards

Cet article vous amènera à comprendre les gardes de route dans Angular et à présenter les méthodes de création de gardes de route, de contrôle si la route peut être activée et de contrôler si la route peut être quittée. J'espère que cela sera utile à tout le monde !

Environnement :

• CLI angulaire : 11.0.6

• Angulaire : 11.0.7

• Nœud :

  npm : 6.14.6

• IDE : Visual Studio Code
Dans notre processus actuel de développement commercial, nous rencontrons souvent les besoins suivants :

Tutoriel angulaire
• "]
  Lorsque l'utilisateur est dans l'interface d'édition et quitte sans enregistrer, il doit être demandé à l'utilisateur s'il doit abandonner la modification.

• Visant le scénario ci-dessus, Angualr utilise des Route Guards (Route Guards) pour le mettre en œuvre.

路由守卫（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. 控制路由是否退出（离开）

和控制路由是否可以激活类似，在路由定义出增加 canDeactivate1. Créer des gardes de route

Angular CLI fournit des outils de ligne de commande qui peuvent créer rapidement un garde de routage fichier framework : ng génère une authentification de garde. Après l'exécution, Angular CLI nous demandera quelles interfaces nous devons implémenter, nous pouvons simplement la vérifier directement :

Description :
CanActivate : Contrôler si la route peut être activée
CanActivateChild : Contrôler si le sous -route peut être activée

CanDeactivate : contrôle si la route peut être quittée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!