Angular路由配置：如何重定向到第一个可访问子路由？

问题分析 #

你当前的静态重定向配置（redirectTo: 'child1'）无法处理路由守卫拦截的情况——静态重定向不会触发目标路由的权限检查，一旦child1被守卫拦截，整个重定向逻辑就会失效，不会自动尝试后续子路由。

解决方案：动态判断可访问路由 #

需要通过自定义路由守卫或组件初始化逻辑，逐个检查子路由的访问权限，找到第一个能通过守卫的路由并完成导航。

方案1：使用自定义守卫处理重定向

1. 修改路由配置，移除原静态重定向路由，给父路由添加自定义守卫：

const routes: Routes = [
  {
    path: '',
    component: ParentComponent,
    canActivate: [DynamicRedirectGuard], // 新增自定义守卫
    children: [
      {
        path: 'child1',
        component: Child1Component,
        canActivate: [routeGuard],
      },
      {
        path: 'child2',
        component: Child2Component,
        canActivate: [routeGuard],
      },
      {
        path: 'child3',
        component: Child3Component,
        canActivate: [routeGuard],
      },
    ],
  },
];

2. 创建DynamicRedirectGuard，遍历子路由并检查权限：

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot } from '@angular/router';
import { routeGuard } from './path-to-your-route-guard';

@Injectable({ providedIn: 'root' })
export class DynamicRedirectGuard implements CanActivate {
  constructor(
    private router: Router,
    private authGuard: routeGuard
  ) {}

  async canActivate(route: ActivatedRouteSnapshot): Promise<boolean> {
    const childRoutes = route.children;

    // 逐个检查子路由的访问权限
    for (const child of childRoutes) {
      try {
        const hasAccess = await this.authGuard.canActivate(child);
        if (hasAccess) {
          // 导航到第一个可访问的子路由
          this.router.navigate([child.path], { relativeTo: route });
          return false; // 阻止父路由直接激活
        }
      } catch (err) {
        // 权限检查失败，跳过当前子路由
        continue;
      }
    }

    // 所有子路由都不可访问时的 fallback 逻辑
    this.router.navigate(['/403']);
    return false;
  }
}

方案2：在父组件初始化时处理

如果不想新增守卫，也可以在ParentComponent的ngOnInit中完成逻辑：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, UrlTree } from '@angular/router';
import { routeGuard } from './path-to-your-route-guard';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private authGuard: routeGuard
  ) {}

  async ngOnInit() {
    const childRoutes = this.activatedRoute.routeConfig?.children || [];

    for (const child of childRoutes) {
      // 创建子路由的快照用于权限检查
      const childSnapshot = this.router.createUrlTree([child.path]).root.children['primary'].value;
      const hasAccess = await this.authGuard.canActivate(childSnapshot);

      if (hasAccess) {
        this.router.navigate([child.path], { relativeTo: this.activatedRoute });
        return;
      }
    }

    // 无可用路由时跳转
    this.router.navigate(['/403']);
  }
}

关键说明 #

• 静态重定向是路由级别的预配置，不会触发目标路由的canActivate守卫，因此无法处理权限拦截场景。
• 动态方案通过主动调用守卫的canActivate方法，逐个验证子路由权限，确保找到第一个可访问的路由完成导航。

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