升级Angular 5后canActivate守卫未触发问题求助

你的LoggedInGuard没被调用的问题大概率出在路由配置结构和匹配逻辑上，我们一步步来排查修复：

1. 调整路由配置结构 #

你当前把canActivate加在带有子路由的空路径父路由上，而子路由又是空路径且设置了pathMatch: full，这种嵌套结构会让Angular的路由匹配机制跳过父路由的守卫校验。

直接把canActivate绑定到懒加载的路由条目上，同时简化根路由结构：

// app.routing
const APP_ROUTES: Routes = [
  { 
    path: '', 
    loadChildren: 'app/myModule/myModule.module#MyModule', 
    canActivate: [LoggedInGuard],
    pathMatch: 'full'
  },
  {path: '**', redirectTo: ''}
];

修改后，访问根路径时会先触发LoggedInGuard的校验，再加载懒加载模块。

2. 验证守卫的注入状态 #

先看LoggedInGuard构造函数里的console.log("constructor")是否在控制台输出：

• 如果没输出：说明守卫没有被正确注入，检查AppModule的providers数组是否确实包含LoggedInGuard，同时确保懒加载的MyModule里没有重复提供这个守卫（避免注入冲突）。
• 如果构造函数日志输出了，但canActivate里的日志没输出：那就是路由匹配的问题，上面的路由调整就能解决。

3. 修复守卫逻辑的潜在问题 #

你当前的守卫逻辑存在无限循环风险：如果当前url不是/login就跳转到/login，但你的路由配置里并没有/login的条目，跳转后会再次触发守卫。

先补充登录路由：

// app.routing
const APP_ROUTES: Routes = [
  { 
    path: '', 
    loadChildren: 'app/myModule/myModule.module#MyModule', 
    canActivate: [LoggedInGuard],
    pathMatch: 'full'
  },
  { path: 'login', component: LoginComponent }, // 新增登录路由
  {path: '**', redirectTo: ''}
];

再调整守卫逻辑，改为判断用户实际登录状态，而非url：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  console.log("inside canActivate!");
  // 假设userService有isLoggedIn方法判断用户登录状态
  if (!this.userService.isLoggedIn()) {
    this.router.navigate(['/login']);
    return false;
  }
  return true;
}

额外检查点 #

• 确保UserService已在AppModule或核心模块中提供，避免守卫注入失败。
• 清除浏览器缓存，Angular的懒加载模块缓存可能导致路由配置不生效。

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