Angular路由：根据用户权限动态设置首个可用子路由为默认激活路由

当然可以实现！这种动态根据用户权限选择默认路由的需求，用Angular的路由元数据+守卫/初始化器就能优雅解决，完全不用硬编码死默认值。下面是具体的实现思路和步骤：

1. 给路由添加权限标识元数据 #

首先，我们需要给每个子路由配置添加data.roles字段，用来标记该路由允许访问的用户角色。这样权限规则就和路由配置绑定在一起，便于维护：

children: [
  { 
    component: Access, 
    path: 'access',
    data: { roles: ['FullAdmin', 'CustomAdmin'] } // 两类管理员都能访问
  },
  { 
    component: Authentication, 
    path: 'authentication',
    data: { roles: ['FullAdmin'] } // 仅超级管理员可访问
  },
  { 
    component: Domains, 
    path: 'domains',
    data: { roles: ['FullAdmin', 'CustomAdmin'] }
  },
  { 
    component: Recovery, 
    path: 'recovery',
    data: { roles: ['FullAdmin', 'CustomAdmin'] }
  },
  { 
    path: '**', 
    pathMatch: 'full',
    redirectTo: '' // 先留空，后续动态赋值
  }
]

2. 实现权限判断与首个可用路由计算服务 #

创建一个服务来封装用户权限获取和路由匹配逻辑，这样逻辑可以复用：

import { Injectable } from '@angular/core';
import { Routes } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class AuthService {
  getCurrentUserRole(): string {
    // 替换成你获取用户角色的实际逻辑（比如从localStorage、API返回值）
    // 示例：当前用户是自定义管理员
    return 'CustomAdmin';
  }
}

@Injectable({ providedIn: 'root' })
export class RoutePermissionService {
  constructor(private authService: AuthService) {}

  getFirstAccessibleRoute(childrenRoutes: Routes): string | null {
    const userRole = this.authService.getCurrentUserRole();
    // 按路由定义顺序，找到第一个用户有权限访问的路由（跳过通配符路由）
    return childrenRoutes.find(route => {
      if (route.path === '**') return false;
      const allowedRoles = route.data?.roles || [];
      return allowedRoles.includes(userRole);
    })?.path || null;
  }
}

3. 动态设置默认路由（两种方案可选） #

方案一：应用初始化时配置默认路由 #

用APP_INITIALIZER在应用启动时就计算好默认路由，更新通配符路由的redirectTo值，这样用户打开应用就直接跳转到正确的路由：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { Router } from '@angular/router';
import { RoutePermissionService } from './route-permission.service';

export function setupDefaultRoute(permissionService: RoutePermissionService, router: Router) {
  return () => {
    // 找到包含目标子路由的父路由（根据你的实际路由结构调整）
    const parentRoute = router.config.find(r => r.children?.length);
    if (parentRoute?.children) {
      const defaultPath = permissionService.getFirstAccessibleRoute(parentRoute.children);
      // 更新通配符路由的跳转目标
      const wildcardRoute = parentRoute.children.find(r => r.path === '**');
      if (wildcardRoute && defaultPath) {
        wildcardRoute.redirectTo = defaultPath;
      }
    }
  };
}

@NgModule({
  // ...其他模块配置
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: setupDefaultRoute,
      deps: [RoutePermissionService, Router],
      multi: true
    }
  ]
})
export class AppModule {}

方案二：用路由守卫处理父路由跳转 #

如果你的父路由是空白路径（比如path: ''），可以给父路由添加守卫，当用户访问父路由时自动跳转到首个可用路由：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, Router, UrlTree } from '@angular/router';
import { Observable, of } from 'rxjs';
import { RoutePermissionService } from './route-permission.service';

@Injectable({ providedIn: 'root' })
export class DefaultRouteGuard implements CanActivate {
  constructor(
    private router: Router,
    private permissionService: RoutePermissionService
  ) {}

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {
    const childrenRoutes = route.routeConfig?.children || [];
    const defaultPath = this.permissionService.getFirstAccessibleRoute(childrenRoutes);
    
    if (defaultPath) {
      // 跳转到首个可用路由
      return of(this.router.createUrlTree([defaultPath], { relativeTo: route }));
    }
    // 无可用路由时，跳转到403页面或其他处理
    return of(this.router.createUrlTree(['/forbidden']));
  }
}

然后更新父路由配置：

{
  path: '',
  canActivate: [DefaultRouteGuard],
  children: [
    // 你的子路由列表...
  ]
}

关键优势 #

• 完全动态化：不用硬编码默认路由，路由顺序或权限规则变更时，只需要调整路由配置即可
• 权限集中管理：所有路由的权限规则都在data.roles中，便于统一维护
• 灵活扩展：后续新增角色或路由时，只需要添加对应的roles配置，无需修改核心逻辑

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