1. 理解Angular路由守卫
在开发复杂的Angular应用时，经常需要根据用户权限限制其对特定页面的访问。例如，一个管理员页面只应被具有管理员权限的用户访问。Angular的路由守卫（Route Guards）机制正是为此目的而设计，它允许我们在路由激活、离开或加载时执行逻辑，从而控制导航行为。
其中，canActivate 守卫是最常用的一种，它决定一个路由是否可以被激活。当用户尝试导航到一个受保护的路由时，canActivate 守卫会首先被执行。如果守卫返回 true，则允许导航；如果返回 false，则阻止导航。
2. 创建路由守卫
我们可以使用Angular CLI快速生成一个路由守卫。打开终端并运行以下命令：
ng generate guard auth
在生成过程中，CLI会询问你希望实现哪些守卫接口。对于访问控制，我们通常选择 CanActivate。这会在 src/app/auth.guard.ts（或你指定的路径和名称）中生成一个名为 AuthGuard 的服务文件。
生成的 auth.guard.ts 文件内容大致如下：
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service'; // 假设你有一个认证服务
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
// 核心逻辑：检查用户是否已授权
if (this.authService.isAuthorized()) {
return true; // 用户已授权，允许访问
} else {
// 用户未授权，重定向到登录页或仪表盘
this.router.navigateByUrl('/login'); // 或 '/dashboard'
return false; // 阻止访问
}
}
}代码解析：
- @Injectable({ providedIn: 'root' }): 表明这是一个可注入的服务，并在应用的根模块提供。
- AuthService: 这是一个假设的认证服务，负责管理用户的登录状态和权限信息。你需要根据实际需求实现这个服务，例如，它可能包含 isAuthorized() 或 hasRole(role: string) 等方法。
- canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): 这是 CanActivate 接口的核心方法。
- route: 包含即将激活的路由的快照信息。
- state: 包含路由器状态的快照信息。
- this.authService.isAuthorized(): 在这里调用你的认证服务来判断当前用户是否具有访问权限。
- this.router.navigateByUrl('/login'): 如果用户未授权，我们使用 Router 服务将其重定向到另一个页面（例如，登录页面或一个公共的仪表盘）。
- return false: 阻止当前路由的激活。
3. 应用路由守卫
创建守卫后，需要将其应用到你希望保护的路由上。这通常在你的路由配置文件（例如 app-routing.module.ts）中完成。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard'; // 导入你的守卫
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'dashboard', component: DashboardComponent },
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard] // 在这里应用AuthGuard
},
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: '**', redirectTo: '/dashboard' } // 捕获所有未匹配的路由
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }在上述示例中，admin 路由通过 canActivate: [AuthGuard] 配置了 AuthGuard。这意味着，每当用户尝试导航到 /admin 路径时，AuthGuard 的 canActivate 方法都会被调用。只有当 canActivate 返回 true 时，AdminComponent 才能被加载和显示。
4. 注意事项与最佳实践
- 认证服务 (AuthService) 的实现： 路由守卫的有效性完全取决于其所依赖的认证服务。AuthService 应该负责处理用户登录、注销、存储和验证令牌（如JWT）、检查用户角色或权限等核心认证和授权逻辑。
- 多守卫： canActivate 属性可以接受一个守卫数组 canActivate: [Guard1, Guard2]。在这种情况下，所有守卫都会按顺序执行，只有当所有守卫都返回 true 时，路由才会被激活。
- 用户体验： 当用户被阻止访问时，提供明确的反馈非常重要。除了重定向，你还可以考虑显示一个提示消息（如Toast通知），告知用户为什么他们无法访问该页面。
- 懒加载模块的守卫： 如果你的管理员页面属于一个懒加载模块，你可以在模块级别使用 canLoad 守卫，以防止模块本身在用户未授权时被下载，从而优化性能。
- 错误处理： 确保你的 AuthService 能够健壮地处理认证相关的错误，并将其反映给守卫。
总结
通过Angular路由守卫，我们可以优雅且高效地实现对应用中特定页面的访问控制。canActivate 接口提供了一个强大的钩子，允许我们在路由激活前执行自定义逻辑，结合一个完善的认证服务，能够极大地增强Angular应用的安全性。这种模式不仅适用于管理员页面，也适用于任何需要根据用户状态或权限进行访问限制的场景。
