如何用角型App模型保护App

Question

我有一个大型项目使用的应用程序外壳模型。我也使用角MSAL.js (v2) (虽然这个问题可能不是特定于MSAL)。

在我的例子中，我使用MsalGuard保护了我的应用程序项目路由。但是，我也希望在应用程序构建之前调用保护检查，而不是注入到app-shell中的项目。基本上，我希望在加载任何东西之前都要检查我的警卫，包括app-shell。

因为我的所有路由都是在每个项目的内部设置的，所以只有在app-shell构建之后才会触发保护，在我可以重定向到登录页面(如果触发保护)之前，应用程序会启动更多的部分。

我试图做的是在app-shell中设置一个通用的路由保护，以便在加载shell之前触发保护。

app-shell-routing.module.ts

// imports...
const routes: Routes = [{ path: '', component: AppShellComponent, canLoad: [MsalGuard] }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppShellRoutingModule {}

app-shell.module.ts

// imports and other configs...
...
imports: [
  ...
  AppShellRoutingModule
]
...

但是，这并不能保护应用程序外壳不被构建，而且它仍然是在身份验证重定向之前构建的(来自返回false的保护程序)。canLoad和canActivate的结果是一样的。

是否有可能保护应用程序外壳，以便在加载整个shell之前条件必须为真，而不仅仅是保护加载到shell中的项目？

总加载时间可能完全相同(一次加载发生在路由保护之前和之后，另一次加载之后发生)，但我认为如果该保护被返回为false，这将是一种更好的用户体验。

Answer 1

我不确定您的保护措施，但是如果您想阻止应用程序加载，可以将其连接到根模块: APP_INITIALIZER：伊尼蒂里泽中。如果用户不被允许你可以重定向等等..。文档中有几个例子。

Answer 2

是否有可能保护应用程序外壳，以便在加载整个shell之前条件必须为真，而不仅仅是保护加载到shell中的项目？

据我的理解--不-- App是在构建时创建的，并创建了静态HTML --因此canLoad保护程序不会在那里提供帮助。App Shell文档

因此，我看到的唯一机会是在角引导之前检查index.html中的用户状态。这可能可以使用“标准”JavaScript msval API来完成，检查用户是否登录，如果没有隐藏<app-root>。