面试题：Angular路由守卫与导航控制的高级定制

实现思路

创建路由守卫服务：使用Angular CLI命令 ng generate guard <guard - name> 创建一个新的路由守卫服务。例如 ng generate guard auth - guard。
依赖注入相关服务：在守卫服务中，注入 Router 服务用于导航，注入 AuthService（假设存在，用于获取用户角色信息）。

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

实现 canActivate 方法：在该方法中，获取当前用户角色，检查是否有权限访问目标路由。

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

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    const userRole = this.authService.getUserRole();
    const requiredRole = next.data['requiredRole'];
    if (userRole === requiredRole) {
      return true;
    } else {
      const missingPermissionInfo = `You don't have permission to access ${state.url}`;
      this.router.navigate(['/guide - page'], { queryParams: { error: missingPermissionInfo } });
      return false;
    }
  }
}

配置路由：在 app - routing.module.ts 中，为需要权限控制的路由添加 canActivate 配置。

const routes: Routes = [
  {
    path: 'admin - dashboard',
    component: AdminDashboardComponent,
    canActivate: [AuthGuard],
    data: { requiredRole: 'admin' }
  },
  {
    path: 'guide - page',
    component: GuidePageComponent
  }
];

与现有Angular路由机制集成

路由配置：通过在路由定义中添加 canActivate 字段，并指定为自定义的路由守卫服务，将守卫与路由关联。当用户尝试访问路由时，Angular会自动调用该守卫的 canActivate 方法。
导航控制：守卫服务中的 Router 实例允许我们在权限不足时，动态地导航到指定的指导页面，并通过 queryParams 传递权限缺失信息。

涉及的Angular底层原理

依赖注入：通过依赖注入，将 Router 和 AuthService 注入到守卫服务中，使守卫服务能够获取用户角色信息并进行导航操作。
路由生命周期：canActivate 是路由生命周期钩子之一，在路由激活之前被调用。它决定是否允许激活目标路由。

优化点

缓存用户角色：避免每次调用 canActivate 都从服务获取用户角色，可以在服务中缓存角色信息，减少不必要的请求。
全局错误处理：可以创建一个全局的错误处理机制，统一处理从路由守卫传递过来的权限缺失信息，而不是在每个守卫中单独处理导航逻辑。这样可以提高代码的可维护性。
性能优化：如果有大量的路由需要权限控制，可以考虑使用更高效的数据结构或算法来检查权限，以提高 canActivate 方法的执行效率。

面试题：Angular路由守卫与导航控制的高级定制

知识考点

面试题答案

实现思路

与现有Angular路由机制集成

涉及的Angular底层原理

优化点