Angular Routing Guard 教程

Angular 的路由守卫（Routing Guards）是保护路由的重要机制，它允许我们在路由导航之前执行一些逻辑检查，例如验证用户是否已登录、是否有权限访问某个路由等。

基本概念

• CanActivate: 控制路由是否可以被激活。
• CanActivateChild: 控制嵌套路由是否可以被激活。
• CanDeactivate: 控制路由是否可以被注销。
• Resolve: 在激活路由之前获取数据。

创建路由守卫

首先，我们需要创建一个路由守卫类：

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

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

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    // 这里可以添加你的认证逻辑
    if (this.isAuthenticated()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }

  private isAuthenticated(): boolean {
    // 实现你的认证逻辑
    return false;
  }
}

使用路由守卫

接下来，在路由配置中使用这个守卫：

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard]
  },
  // 其他路由...
];

进阶使用

• CanActivateChild: 对于嵌套路由，我们可以使用 CanActivateChild 守卫。
• Resolve: 在激活路由之前获取数据，可以使用 Resolve 守卫。

图片示例

Angular Routing

更多关于 Angular 路由的信息，请访问我们的Angular 路由教程。