Angular父子组件配置不同权限及无父权限访问子组件的实现方案

现有嵌套路由结构的核心限制 #

Angular路由守卫的执行逻辑为父路由守卫优先级高于所有子路由守卫，你当前配置的父路由:userId绑定了Permission1权限校验，只要该校验不通过，所有子路由都不会被触发，因此无法在现有嵌套结构下直接绕过父级权限校验打开查看模式的SecondComponent。

方案1：修改AuthGuard逻辑实现父级权限豁免（适配现有嵌套结构） #

如果不想调整路由结构，可以通过给父路由增加豁免规则、修改AuthGuard校验逻辑实现需求：

1. 调整父路由的data配置，增加豁免子路由列表

{
  path: ':userId', component: MainComponent,
  data: {
    permissions: [Permission1],
    // 新增豁免权限校验的子路由路径
    exemptChildRoutes: ['second-view']
  },
  canActivate: [AuthGuard],
  children: [
    // 原有子路由配置保持不变
    { path: '', component: FirstComponent,
      data: { reuseRoute: true} },
    { path: 'second', component: SecondComponent,
      data: {
        actionType: ActionType.Edit,
        permissions: [Permission2] },
      canActivate: [AuthGuard] },
    { path: 'second-view/:id', component: SecondComponent,
      data: {
        actionType: ActionType.View,
        permissions: [Permission2] },
      canActivate: [AuthGuard, OverviewGuard] }
  ]
}

2. 修改AuthGuard的校验逻辑，触发父路由权限校验前先判断当前子路由是否在豁免列表中：

// AuthGuard.canActivate 核心逻辑片段
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
  const parentData = route.parent?.data;
  const currentChildPath = route.routeConfig?.path;
  // 如果父路由配置了豁免列表，且当前子路由在豁免列表中，跳过父级权限校验
  if (parentData?.exemptChildRoutes?.includes(currentChildPath)) {
    return true;
  }
  // 原有权限校验逻辑保持不变
  const requiredPermissions = route.data?.permissions || [];
  return this.authService.hasPermissions(requiredPermissions);
}

注意：该方案会让父路由和子路由的权限逻辑耦合，后续新增豁免路由需要同步修改父路由配置，适合临时调整场景

方案2：新增独立顶级路由（更推荐，解耦性更强） #

直接在路由配置的根级别新增独立的查看页路由，不挂载到带权限校验的:userId父路由下，完全脱离父级权限限制：

// 根路由数组新增以下配置，不要放在:userId的children里
[
  // 原有路由配置保持不变
  {
    path: ':userId', component: MainComponent,
    // 原有父路由配置不变
  },
  // 新增独立的SecondComponent查看路由
  {
    path: 'second-view-independent/:id',
    component: SecondComponent,
    data: {
      actionType: ActionType.View,
      // 仅配置需要的权限，无需加Permission1
      permissions: [Permission2]
    },
    canActivate: [AuthGuard, OverviewGuard]
  }
]

配置完成后直接访问/second-view-independent/xxx路径即可，无需持有Permission1权限。

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