基于路由可激活状态控制导航菜单渲染的实现咨询

这个需求在权限控制场景里太常见了，核心就是要复用路由守卫的判断逻辑，避免在菜单里重复写权限规则。我给你提供一套完整的实现方案，分步骤来：

1. 创建路由访问性判断服务 #

首先我们封装一个RouteAccessService，专门用来判断某个路由是否能被激活。它会模拟路由激活时的守卫校验逻辑，调用你已有的AuthGuard来做权限判断：

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

@Injectable({ providedIn: 'root' })
export class RouteAccessService {
  constructor(private router: Router, private injector: Injector) {}

  async canRouteActivate(path: string): Promise<boolean> {
    // 递归查找对应路径的路由配置（处理嵌套路由）
    const targetRoute = this.findRouteByPath(this.router.config, path);
    if (!targetRoute) return false;

    // 创建模拟的路由快照，用于守卫校验
    const routeSnapshot = new ActivatedRouteSnapshot();
    routeSnapshot.routeConfig = targetRoute;

    // 逐个调用路由的canActivate守卫
    if (targetRoute.canActivate?.length) {
      for (const GuardClass of targetRoute.canActivate) {
        // 通过注入器实例化守卫（处理守卫的依赖注入）
        const guard = this.injector.get<CanActivate>(GuardClass);
        const isAllowed = await guard.canActivate(routeSnapshot, this.router.routerState.snapshot);
        
        // 只要有一个守卫拒绝，就返回不可访问
        if (!isAllowed) return false;
      }
    }

    return true;
  }

  // 递归遍历路由配置，找到匹配路径的路由
  private findRouteByPath(routes: any[], targetPath: string): any | null {
    for (const route of routes) {
      if (route.path === targetPath) return route;
      if (route.children?.length) {
        const found = this.findRouteByPath(route.children, targetPath);
        if (found) return found;
      }
    }
    return null;
  }
}

2. 在菜单组件中使用服务过滤菜单项 #

接下来在你的菜单组件里，注入这个服务，过滤掉那些被守卫拦截的菜单项：

import { Component, OnInit } from '@angular/core';
import { RouteAccessService } from './route-access.service';

@Component({
  selector: 'app-menu',
  template: `
    <nav>
      <ul>
        <li *ngFor="let menuItem of accessibleMenuItems">
          <a [routerLink]="menuItem.path">{{ menuItem.label }}</a>
        </li>
      </ul>
    </nav>
  `
})
export class MenuComponent implements OnInit {
  // 原始菜单配置（可以单独维护，也可以从路由自动提取，见下文优化）
  private originalMenuItems = [
    { path: 'tactics', label: '策略管理' }
  ];
  accessibleMenuItems: typeof this.originalMenuItems = [];

  constructor(private routeAccessService: RouteAccessService) {}

  async ngOnInit() {
    // 过滤出可访问的菜单项
    this.accessibleMenuItems = await Promise.all(
      this.originalMenuItems.map(async item => {
        const canAccess = await this.routeAccessService.canRouteActivate(item.path);
        return canAccess ? item : null;
      })
    ).then(items => items.filter(Boolean));
  }
}

3. 优化：从路由配置自动生成菜单 #

为了避免菜单配置和路由配置重复维护，你可以给路由的data字段添加菜单相关元数据，然后自动提取菜单：

首先修改你的routes.ts：

export const routes = [ 
  { path: '', component: LayoutComponent, children: [ 
    { 
      path: 'tactics', 
      component: IframeComponent, 
      canActivate: [AuthGuard], 
      data: { expectedRole: 'admin', menuLabel: '策略管理' } // 添加菜单标签
    } 
  ] } 
];

然后在菜单组件里添加提取逻辑：

// 在MenuComponent中添加
import { Router } from '@angular/router';

// ... 其他代码 ...

constructor(
  private routeAccessService: RouteAccessService,
  private router: Router // 注入Router
) {}

// 从路由配置自动提取菜单项
private extractMenuItemsFromRoutes(routes: any[]): typeof this.originalMenuItems {
  const menuItems: typeof this.originalMenuItems = [];
  routes.forEach(route => {
    // 只有带有menuLabel的路由才作为菜单项
    if (route.data?.menuLabel) {
      menuItems.push({
        path: route.path,
        label: route.data.menuLabel
      });
    }
    // 递归处理子路由
    if (route.children?.length) {
      menuItems.push(...this.extractMenuItemsFromRoutes(route.children));
    }
  });
  return menuItems;
}

// 修改ngOnInit
async ngOnInit() {
  this.originalMenuItems = this.extractMenuItemsFromRoutes(this.router.config);
  // 后续过滤逻辑和之前一致
  this.accessibleMenuItems = await Promise.all(
    this.originalMenuItems.map(async item => {
      const canAccess = await this.routeAccessService.canRouteActivate(item.path);
      return canAccess ? item : null;
    })
  ).then(items => items.filter(Boolean));
}

注意事项 #

• 如果你的AuthGuard包含异步逻辑（比如调用后端接口获取用户角色），确保canActivate方法返回Promise<boolean>或Observable<boolean>，服务里的await会自动处理。
• 如果你使用了canActivateChild等其他守卫类型，可以扩展RouteAccessService的逻辑，加入对应守卫的校验。
• 可以考虑添加缓存逻辑，避免重复调用守卫判断，提升性能（比如用Map存储已判断过的路由结果）。

内容的提问来源于stack exchange，提问作者Richard Tingle