Angular OpenID：在浏览器中加载应用程序之前重定向到登录

Question

我正在使用 Angular 12 和 angular-oauth2-oidc，到目前为止我已经成功设置了身份验证。但是，就在被重定向到登录之前，正在加载应用程序（仅一瞬间，但仍然如此）。有什么方法可以在您未登录的情况下完全隐藏该应用程序？

Answer 1

如果您正在使用路由，那么您可以考虑使用 guards 来防止在用户未获得授权的情况下加载任何路由。 守卫看起来像

class AuthenticatedGuard implements CanActivate {
  userLoggedIn = AuthService.isLoggedIn;
  canActivate() {
    if (this.userLoggedIn) {
     return true;
    } else {
     return false;
    }
  }
}

然后为了防止应用程序加载需要授权的路由，在路由模块中，您可以使用 canActivate 属性 单独添加守卫，甚至将它们作为路由的子级像下面这样节省一些时间：

{    
  path: '',
  component: AppComponent,
  canActivate: [AuthenticatedGuard],
  children: [
     { path: '', component: HomeComponent }, // Other routes here
  ]
}