什么是路由守卫 (Route Guards)？

推荐答案

路由守卫（Route Guards）是 Angular 中用于控制路由导航的机制。它们允许开发者在用户进入或离开某个路由时执行特定的逻辑，例如权限验证、数据加载或确认操作。Angular 提供了多种类型的路由守卫，包括 CanActivate、CanActivateChild、CanDeactivate、Resolve 和 CanLoad。

本题详细解读

1. 路由守卫的类型

Angular 提供了以下几种路由守卫：

• CanActivate：用于控制是否允许用户访问某个路由。通常用于权限验证。
• CanActivateChild：类似于 CanActivate，但用于控制子路由的访问。
• CanDeactivate：用于控制用户是否可以离开当前路由。通常用于表单未保存时的提示。
• Resolve：在路由激活之前获取数据，并将数据传递给组件。
• CanLoad：用于控制是否允许异步加载某个模块。通常用于懒加载模块时的权限验证。

2. 路由守卫的实现

路由守卫通常是一个实现了特定接口的类。例如，CanActivate 守卫需要实现 CanActivate 接口，并定义 canActivate 方法。

// www.javascriptcn.com code example
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // 在这里实现权限验证逻辑
    return true; // 返回 true 允许访问，返回 false 阻止访问
  }
}

3. 路由守卫的配置

在路由配置中，可以通过 canActivate 属性来指定守卫。

const routes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [AuthGuard] // 使用 AuthGuard 守卫
  }
];

4. 路由守卫的应用场景

• 权限控制：通过 CanActivate 守卫，可以限制只有特定用户才能访问某些路由。
• 数据预加载：通过 Resolve 守卫，可以在路由激活之前获取必要的数据，确保组件在加载时数据已经准备好。
• 防止数据丢失：通过 CanDeactivate 守卫，可以在用户离开当前路由时提示保存未保存的数据。
• 模块懒加载：通过 CanLoad 守卫，可以控制是否允许加载某个懒加载模块。

5. 路由守卫的执行顺序

当用户导航到一个路由时，Angular 会按照以下顺序执行路由守卫：

1. CanDeactivate（如果当前路由有守卫）
2. CanActivate 和 CanActivateChild
3. Resolve
4. CanLoad（如果路由是懒加载的）

如果任何一个守卫返回 false 或 UrlTree，导航将被取消。