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 :

Besoin de limiter l'accessibilité de certaines URL, par exemple pour l'interface de gestion du système, uniquement à celles Seuls les utilisateurs ayant les droits d'administrateur peuvent l'ouvrir. [Recommandation de didacticiel connexe : "

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）来实现。

路由守卫（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 :

rrreee

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

🎜🎜🎜CanLoad : contrôle si le module peut être chargé🎜🎜🎜🎜Les plus couramment utilisés sont 1 et 3, qui contrôlent l'entrée et la sortie respectivement. Selon la configuration ci-dessus, AngularCLI génère automatiquement le code suivant. Remplacez simplement return true; par notre code réel. return false; signifie que sauter n'est pas autorisé ou que quitter la page actuelle est annulé. 🎜rrreee🎜Dans la méthode canActivate, nous pouvons également utiliser des sauts. Par exemple, la page détermine si vous êtes connecté. Si vous n'êtes pas connecté, accédez à la page de connexion : 🎜rrreee🎜2. être activé🎜🎜Pour contrôler si l'itinéraire peut être activé, il doit être défini à l'endroit où l'itinéraire est défini et l'attribut canActivate est ajouté. Si nécessaire, vous pouvez également ajouter des attributs de données, par exemple en indiquant à notre AuthGuard quelles autorisations doivent être vérifiées pour accéder à l'itinéraire actuel. L'attribut data est facultatif. 🎜rrreee🎜3. Contrôler si l'itinéraire quitte (quitter)🎜🎜 est similaire à contrôler si l'itinéraire peut être activé. Il est défini dans la route Add canDeactivate et formule la Garde correspondante. Plus d'exemples ici🎜🎜Résumé🎜🎜🎜🎜Utilisez Route Guards pour contrôler l'entrée et la sortie des URL ;🎜🎜🎜🎜Angular CLI peut nous aider à créer des fichiers de garde ;🎜🎜🎜🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

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!