Angular:在每次路由更改时运行 canActivate

Question

我最近被 Angular 路由守卫卡住了。 CanActive 仅在页面加载时运行一次，并且不会在 protected 路由内的路由更改时运行。我认为这已更改，因为它过去常常在每次更改时运行。根据我在论坛中阅读的内容，我应该使用 CanActivateChild。问题是，我们的应用程序由多个模块组成，这些模块有多个路由后代，当我在根模块中使用 CanActivateChild 时，它会在更改路由时被调用多次。

我觉得为每个子模块分配一个守卫是愚蠢的，因为对于 AppModule，那些延迟加载的子模块应该只是“黑盒子”，我想定义所有这些模块都应该被守卫。

export const routes: Routes = [
  {
    path: '404',
    component: NotFoundComponent
  },
  {
    path: '',
    canActivate: [AuthGuard],
    component: FullLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'administration',
        loadChildren: './administration/administration.module#AdministrationModule'
      },
      {
        path: 'settings',
        loadChildren: './settings/settings.module#SettingsModule'
      }
    ]
  },
  {
    path: '',
    loadChildren: './account/account.module#AccountModule'
  },
  {
    path: '**',
    redirectTo: '404'
  }
];

有什么解决办法吗？还是您认为这在安全方面“不是问题”？

谢谢大家

Answer 1

面对同样的问题，我在问题上所能找到的只是 Github 上一些已关闭的问题，Angular 开发人员声明这种行为“是设计使然”。

所以我最终做的是订阅 app.component 中的导航事件并在那里触发 AuthGuard 检查:

constructor(
  private router: Router,
  private route: ActivatedRoute,
  private authGuard: AuthGuard,
) {}

ngOnInit() {
  this.router.events
    .subscribe(event => {
      if (event instanceof RoutesRecognized) {
        this.guardRoute(event);
      }
    }));
}

private guardRoute(event: RoutesRecognized): void {
  if (this.isPublic(event)) {
    return;
  }

  if (!this.callCanActivate(event, this.authGuard)) {
    return;
  }
}

private callCanActivate(event: RoutesRecognized, guard: CanActivate) {
  return guard.canActivate(this.route.snapshot, event.state);
}

private isPublic(event: RoutesRecognized) {
  return event.state.root.firstChild.data.isPublic;
}

AuthGuard 相当标准:

@Injectable()
export class AuthGuard implements CanActivate{

  constructor(private auth: AuthService, private router: Router) { }

  canActivate(): Promise<boolean> {
    return this.auth.isLoggedInPromise()
      .then(isLoggedIn => {
        if (!isLoggedIn) {
          this.router.navigate(["/login"]);
        }
        return isLoggedIn;
      });
    }
  }

公共(public)路由应该这样配置:

{
  path: "login",
  component: LoginComponent,
  data: { isPublic: true }
}

这样实现的好处是默认情况下一切都受到保护，公共(public)路由应该明确配置，这将减少一些路由不 protected 可能性。还将其重构为某种服务，以便能够在多个应用程序中使用它。

灵感来自 this answer .