AppRouting

{
   path: 'user',
   canLoad: [AuthGuard],
   loadChildren: () =>
   import('./user/user.module').then((m) => m.PublicUserModule)
}

UserRouting

{
    path: '',
    component: PublicUserPageComponent,
    canActivate: [UserPhonesCheckGuard],
    children: [
      /*{
        path: '',
        pathMatch: 'full',
        redirectTo: 'check'
      },*/
      {
        path: 'account',
        loadChildren: () =>
          import('./account/user-account.module').then(
            (m) => m.PublicUserAccountModule
          )
      },
      {
        path: 'check',
        loadChildren: () =>
          import('./check/user-check.module').then(
            (m) => m.PublicUserCheckModule
          )
      }
    ]
  }

根据某些要重定向的条件使用UserPhonesCheckGuard 或支票或帐户子女路线但使用

canActivate() 
    return this.router.parseUrl('/user/check');
  }

浏览器发疯了：（

我应该使用什么路径？

Answer 1

以这种方式；

canActivate() 
    return this.router.parseUrl('/user/check');
}

发生无限循环。

因为当您从UrlTree返回this.router.parseUrl（由canActivate返回）时，当前导航被取消，并且开始了新的导航。

由于新导航将转到当前导航的子网址（子项），因此canActivate防护会为新导航再次运行，从而导致无限循环。

这就是为什么您需要一种方法来检测canActivate中的子导航并打破无限循环。检测子导航的一种方法可以是控制url。如；

canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot) {
  console.log(state.url)

  if(state.url === "/user/check" || state.url === "/user/account") 
    return true;

  if(someCondition) /* here you determine which child to navigate */
    return this.router.parseUrl('/user/check');
  else
    return this.router.parseUrl('/user/account');
}

我创建了一个simple demo here。在演示中，您可以在控制台中看到canActivate每次导航都运行两次。一种用于父级导航，另一种用于子级导航。没有if条件，父级导航将无限期运行。

我希望这会有所帮助。

如何在Angular canActivate Guard中从父路由重定向到子路由？

AppRouting

UserRouting

1 个答案: