Angular中Truck模块子路由Guard守卫仅部分生效问题求助

核心问题点 #

• 路由匹配优先级冲突：根路由中配置了{ path: 'truck/search', component: TruckSearchComponent }，Angular路由匹配遵循先到先得规则，访问/truck/search时会直接命中根路由配置，不会进入懒加载的Truck模块，因此该路径下的Guard完全不会触发。
• CanActivateChild未正确配置：虽然TruckGuard实现了CanActivateChild接口，但Truck模块的路由为平铺结构，没有父路由承载canActivateChild配置，所有子路由只有list和search单独配置了canActivate，其余路径没有绑定任何Guard，自然不会触发拦截。
• Guard路径判断逻辑不规范：使用window.location.pathname获取路径在存在base href、hash路由模式时会出现判断误差，应该使用Guard回调参数中自带的state.url获取路由实际路径。
• 无效逻辑冗余：canActivate方法中判断url == '/truck'，但Truck模块内没有配置空路径对应的路由，该判断逻辑无实际作用。

修复步骤 #

1. 清理根路由重复配置
   删除app-routing模块中的{ path: 'truck/search', component: TruckSearchComponent }配置项，确保所有/truck开头的路径都进入懒加载的Truck模块。
2. 调整Truck模块路由结构
   新增父级空路由承载canActivateChild配置，无需为每个子路由单独绑定Guard：

RouterModule.forChild([
  {
    path: '',
    canActivateChild: [TruckGuard],
    children: [
      {path: 'list', component: TruckListComponent},
      {path: 'search', component: TruckSearchComponent},
      {path: 'details/:id', component: TruckDetailsComponent},
      {path: 'menu', component: TruckMenuListComponent},
      {path: 'menu/:id', component: TruckMenuListComponent},
      {path: 'menu/add/:id', component: TruckMenuAddComponent},
    ]
  }
])

3. 优化TruckGuard逻辑
   使用入参中的state.url判断路径，抽离公共校验逻辑：

export class TruckGuard implements CanActivate, CanActivateChild {

  constructor(private authService: AuthService, private router: Router) {}
  
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.checkAccess(state.url);
  }
 
  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.checkAccess(state.url);
  }

  private checkAccess(url: string): boolean {
    const allowedCustomerUrls = ['/truck/list', '/truck/search', '/Login'];
    // 客户角色允许访问的路径校验
    if (allowedCustomerUrls.includes(url) && this.authService.isCustomer()) {
      return true;
    }
    // 如需放开menu、details等路径的权限，可在此补充白名单逻辑，示例：
    // if (url.startsWith('/truck/menu') || url.startsWith('/truck/details')) {
    //   return true;
    // }
    this.router.navigate(['app-forbidden']);
    return false;
  }
}

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