angular - 路由器无限循环，在延迟加载模块上具有第二个 canActivate 防护

Question

我有一个带有延迟加载模块的 Angular 4.3.6 应用程序。这是部分根路由器:

const routes: Routes = [
  { path: '', redirectTo: 'fleet', pathMatch: 'full' },
  {
    path: '',
    component: AppComponent,
    canActivate: [AuthenticationGuard],
    children: [
      {
        path: 'fleet',
        loadChildren: "./modules/fleet.module",
        canActivate: [AuthenticationGuard]
      },
      {
        path: 'password/set',
        loadChildren: "./modules/chooseNewPassword.module",
        canActivate: [ChoosePasswordGuard]
      }
    ]
  }
]
// Exports RouterModule.forRoot(routes, { enableTracing: true });

这两个示例模块中的我的子路由器:

舰队:

RouterModule.forChild([
  {
    path: '',
    component: FleetComponent,
    canActivate: [AuthenticationGuard]
  }
]);

选择新密码:

RouterModule.forChild([
  {
    path: '',
    component: ChooseNewPasswordComponent,
    canActivate: [ChoosePasswordGuard]
  }
]);

AuthenticationGuard 调用如下所示的方法:

return this.getUserSession().map((userSession: UserSession) => {
  if (userSession && userSession.ok) {
    return true;
  }
  else if (userSession && userSession.expired) {
    this.router.navigate(['password/set'])
      .catch((e: Error) => console.error(e));
    return true;
  }
  else {
    window.location.replace('/');
    return false;
  }
}

因此，如果用户的 session 正常，就会激活该路由。如果用户的密码已过期，则会将用户重定向到选择新密码模块。如果没有 session ，则重定向到登录。

ChoosePasswordGuard 执行类似的操作，但仅保护选择新密码组件(一般使用不同的工具来设置密码):

return this.getUserSession().map((userSession: UserSession) => {
  if (userSession) {
    return userSession.expired;
  }
  else {
    return false;
  }
});

这在模块分割之前有效。

现在，我陷入了重定向循环。打开路由器跟踪后，我观察到以下顺序。用户登录，AuthenticationGuard 更正重定向到/password/set 模块，并移交给 ChooseNewPasswordGuard:

1. NavigationStart(id:4，url:'/password/set')
2. RoutesRecognized {id:4，url:“/password/set”，urlAfterRedirects:“/password/set”，状态:RouterStateSnapshot}
3. GuardsCheckStart {id:4，url:“/password/set”，urlAfterRedirects:UrlTree，状态:RouterStateSnapshot}
4. GuardsCheckEnd {id:4，url:“/password/set”，urlAfterRedirects:UrlTree，状态:RouterStateSnapshot，shouldActivate:true}
5. NavigationCancel {id:4，url:“/password/set”，原因:“”}

并且这个循环会重复。

(如果我将整个 ChooseNewPasswordGuard 替换为 return Observable.of(true);，它也会重复)

编辑:即使我在 URL 栏中提供 /#/password/set，我也会被重定向到根页面 (/)...

问题:

1. 既然模块是延迟加载的，我在路由器或防护装置中做错了什么来强制此循环？我对 shouldActivate: true 后跟 NavigationCancel Reason: "" 感到特别困惑。

2. 这是否与我直接在 AuthenticationGuard 中重定向有关，现在该防护已应用于我的主空根路由 ({ path: '', redirectTo: 'fleet', pathMatch: 'full' }) 它总是被调用并重定向，即使我设置了路径？

3. 我真的需要在子路由和根路由中重复 canActivate 防护吗？

4. 像往常一样，欢迎提出任何其他意见。

Answer 1

问题是我过度应用了AuthenticationGuard:它不应该应用于顶级AppComponent，因为它总是会重定向到“选择新密码”模块，即使它是加载该模块。

我的根路线应该如下所示:

const routes: Routes = [
  { path: '', redirectTo: 'fleet', pathMatch: 'full' },
  {
    path: '',
    component: AppComponent,
    // canActivate: [AuthenticationGuard], // <-- Remove this guard
    children: [
      {
        path: 'fleet',
        loadChildren: "./modules/fleet.module",
        canActivate: [AuthenticationGuard]
      },
      {
        path: 'password/set',
        loadChildren: "./modules/chooseNewPassword.module",
        canActivate: [ChoosePasswordGuard]
      }
    ]
  }
]

(我欢迎并乐意接受更好的解释或更好的AuthenticationGuard模式。)