Angular路由守卫(Router Guards)深度解析

在Angular单页应用(SPA)开发中，路由守卫(Router Guards)是一个非常重要的概念。本文将深入讲解Angular中的路由守卫机制，帮助你掌握如何控制用户在应用中的导航权限。

什么是路由守卫？

路由守卫是Angular提供的一种机制，允许开发者在用户导航到某个路由之前或之后执行特定的逻辑判断。这类似于传统服务器端应用中的权限检查，当用户没有权限时返回403错误页面，或者未登录时重定向到登录页面。

路由守卫的类型

Angular提供了五种不同类型的路由守卫：

1. CanActivate：控制是否可以访问某个路由
2. CanActivateChild：控制是否可以访问某个路由的子路由
3. CanDeactivate：控制是否可以离开当前路由
4. Resolve：在路由激活前获取路由数据
5. CanLoad：控制是否可以加载异步模块

CanActivate守卫详解

CanActivate是最常用的守卫类型，用于控制用户是否可以访问某个特定路由。

基本实现

创建一个CanActivate守卫需要以下步骤：

1. 创建一个实现CanActivate接口的类
2. 实现canActivate()方法
3. 将该守卫添加到路由配置中

import { CanActivate } from '@angular/router';

class AlwaysAuthGuard implements CanActivate {
  canActivate() {
    console.log("AlwaysAuthGuard被调用");
    return true;  // 总是允许访问
  }
}

实际应用：登录检查

更实际的例子是检查用户是否已登录：

@Injectable()
class OnlyLoggedInUsersGuard implements CanActivate {
  constructor(private userService: UserService) {};

  canActivate() {
    if (this.userService.isLoggedIn()) {
      return true;
    } else {
      window.alert("请先登录");
      return false;
    }
  }
}

然后在路由配置中使用：

const routes: Routes = [
  {
    path: 'artist/:artistId',
    component: ArtistComponent,
    canActivate: [OnlyLoggedInUsersGuard]
  }
];

CanActivateChild守卫

CanActivateChild用于保护子路由，其实现方式与CanActivate类似：

class AlwaysAuthChildrenGuard implements CanActivateChild {
  canActivateChild() {
    console.log("子路由守卫被调用");
    return true;
  }
}

路由配置：

{
  path: 'artist/:artistId',
  component: ArtistComponent,
  canActivateChild: [AlwaysAuthChildrenGuard],
  children: [
    {path: 'tracks', component: ArtistTrackListComponent}
  ]
}

CanDeactivate守卫

CanDeactivate守卫用于在用户离开当前路由前执行检查，常用于防止用户意外离开有未保存数据的页面。

实现步骤

1. 在组件中添加canDeactivate方法
2. 创建实现CanDeactivate接口的守卫类

// 在SearchComponent中
canDeactivate() {
  return this.itunes.results.length > 0;  // 检查是否有搜索结果
}

// 守卫类
class UnsearchedTermGuard implements CanDeactivate<SearchComponent> {
  canDeactivate(component: SearchComponent) {
    return component.canDeactivate() || 
           window.confirm("您有未保存的更改，确定要离开吗？");
  }
}

守卫函数的参数

守卫函数可以接收以下参数：

1. component: Component - 当前组件实例
2. route: ActivatedRouteSnapshot - 将要激活的路由快照
3. state: RouterStateSnapshot - 将要激活的路由状态

这些参数可以帮助我们做出更精细的权限判断。

守卫的执行顺序

当为路由配置多个守卫时，它们会按照数组中的顺序依次执行。只有当所有守卫都返回true时，导航才会继续。

异步守卫

守卫不仅可以返回布尔值，还可以返回Observable<boolean>或Promise<boolean>，这在需要异步检查权限时非常有用：

canActivate(): Observable<boolean> {
  return this.authService.checkPermissions().pipe(
    map(hasPermission => hasPermission)
  );
}

最佳实践

1. 保持守卫简单：每个守卫应该只关注一个特定的权限检查
2. 使用服务：将权限检查逻辑封装在服务中，便于复用
3. 提供友好的用户体验：当拒绝访问时，应该给出明确的提示
4. 考虑性能：对于频繁访问的路由，守卫应该尽可能高效

总结

Angular的路由守卫机制为开发者提供了强大的导航控制能力。通过合理使用不同类型的守卫，我们可以：

• 实现完善的权限控制系统
• 防止用户意外丢失未保存的数据
• 在导航前后执行必要的业务逻辑
• 提供更好的用户体验

掌握路由守卫是成为Angular高级开发者的重要一步，希望本文能帮助你深入理解这一重要概念。