在延迟加载模块上具有第二激活保护的路由器无限循环

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]
  }
]);

< code>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;
  }
}

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

ChooseSPasswordGuard做了类似的事情，但只保护choose new password组件（通常使用不同的功能设置密码）：

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

1. 导航启动（id:4，url:“/password/set”）
2. 路由识别为｛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，应激活：true}
5. 导航取消{id:4，url:“/password/set”，原因：“}”

并且该循环重复。

(如果我用< code>return Observable.of(true)替换整个ChooseNewPasswordGuard也会重复)；)

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

问题:

> < li>

现在模块是延迟加载的，我在路由器或防护中做错了什么来强制此循环？我对< code>shouldActivate: true后跟< code > navigation cancel reason:" " 感到特别困惑。

我真的需要在我的子路由和根路由中重复激活保护吗？

和往常一样，欢迎任何其他评论。

Answer 1

问题是我过度应用了< code>AuthenticationGuard:它不应该应用于顶级AppComponent，因为它总是会重定向到Choose New Password模块，即使它正在加载该模块。

我的根路由应该如下所示：

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]
      }
    ]
  }
]

(我欢迎并乐意接受更好的解释或更好的身份验证保护模式。)