angular - CanActivateChild 未运行

Question

我有一个问题，当我注销并导航到时/，不会执行 canActivateChild 守卫以重定向到登录。

我的要求是没有登录就无法访问任何应用程序。

这是我的根路由配置：

const appRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/dashboard',
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    runGuardsAndResolvers: 'always',
    children: [
      { path: 'dashboard', component: DashboardComponent },

    ],
    canActivateChild: [AuthGuard],

  }
  // { path: '**', component: PageNotFoundComponent }
];

这是我的 AuthGuard ( userState) 调用自canActivateChild

private userState(nextRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean|UrlTree> {
  return this.auth.authState.pipe(
    first(),
    map(user => {
      if (user != null) {
        return true;
      } else {
        const url = this.router.parseUrl('/login');
        console.log('redirect url', state.url);
        url.queryParams['redirect'] = state.url;
        return url;
      }
    }),
  );
}

登录时，我导航到其中一个/或redirectqueryParam（如果存在）。在注销时，我导航到/，想法是它将重定向到dashboard，并且由于仪表板受到保护且用户为空，因此转到/login?redirect=dashboard。

一切正常，除了最后一部分。当我注销时，它会重定向到仪表板，但不会激活 canActivateChild 守卫，成功完成重定向到仪表板。如果我替换canActivateChild为canActivate，它将按需要工作。

更多细节：

• 我正在使用 Angular 7。
• 也许Angular 4 CanActivateChild 不起作用是一个类似的问题。

Answer 1

我认为你不需要使用 canActivateChild 。您只需要在顶层使用 canActivate 即可，这将照顾该路线的任何孩子。

例如：

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    {
        path: 'dashboard',
        canActivate: [AuthGuard],
        children: [
            { path: '', redirectTo: 'overview', pathMatch: 'full' },
            { path: 'overview', component: DashboardComponent }
            // More child routes go here
        }
    }
];

希望这可以帮助！

Answer 2

您两次声明''路径。也许它在第一个声明中被抓住了。我建议您像这样将第一个声明移到第二个声明中。 { path: '', runGuardsAndResolvers: 'always', children: [ { path: '', pathMatch: 'full', redirectTo: 'dashboard' }, { path: 'dashboard', component: DashboardComponent }, ], canActivateChild: [AuthGuard], }