angular/tutorials/routing_guard

Angular 的路由守卫（Routing Guard）是一种强大的功能，它允许我们控制路由的访问权限。通过使用路由守卫，我们可以确保只有授权的用户才能访问特定的路由。

路由守卫概述

路由守卫可以分为三类：

• 守卫：在路由导航之前检查权限。
• 解析器：在路由配置中配置，用于解析动态路由参数。
• 守卫服务：可以在任何组件中使用，提供全局的权限检查。

守卫的基本用法

以下是一个简单的示例，展示如何在 Angular 中使用路由守卫：

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    if (this.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }

  private isLoggedIn(): boolean {
    // 检查用户是否登录的逻辑
    return false; // 假设用户未登录
  }
}

守卫的最佳实践

• 使用路由守卫来保护敏感的路由，如用户个人资料或设置。
• 避免在守卫中执行重定向，因为这可能会导致路由循环。
• 在守卫中执行异步操作时，使用 async/await 或 Promise 来确保导航完成。

扩展阅读

了解更多关于 Angular 路由守卫的信息，请阅读我们的 Angular 路由守卫教程。

Angular Routing Guard