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

Posted 2023-03-27

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

【英文标题】：Angular OpenID: Redirect to login before app loads in browser

【发布时间】：2021-10-20 06:39:39

【问题描述】：

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

【问题讨论】：

你可以看看APP_INITIALIZER。如果您从中返回一个 observable，它将等待它完成，然后再继续初始化应用程序。 angular.io/api/core/APP_INITIALIZER

@OctavianMărculescu 我尝试了这种方法，但是我仍然遇到与描述相同的问题，不完全确定原因。在引导 @​​987654325@ 之前尝试使用 DoBootstrap 加载身份验证会产生相同的问题。我最终通过将APP_INITIALIZER 与 AuthGuard 结合起来解决了这个问题。

【参考方案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
  ]