Angular 7/NgRX在初始化时进行后端身份验证(初始化效果)

Angular 7/NgRX在初始化时进行后端身份验证(初始化效果),angular,ngrx,ngrx-store,ngrx-effects,Angular,Ngrx,Ngrx Store,Ngrx Effects,我有一个angular应用程序正在使用NgRX存储,作为该存储的一部分,我有用户配置文件和身份验证状态。应用程序在各个方面都运行良好。当应用程序加载时,将调用一个服务,该服务从本地存储读取访问密钥,并连接到后端端点以验证访问密钥,并使用用户配置文件进行响应。我调度一个设置用户和身份验证的操作 然而,我意识到这一切发生得太晚了。当用户在受保护的任何路由上着陆时,身份验证的第一个状态为false 我想将我的方法从服务转移到一个在任何选择器响应之前启动时运行的效果。 我找不到任何关于如何做到这一点的参

我有一个angular应用程序正在使用NgRX存储,作为该存储的一部分,我有用户配置文件和身份验证状态。应用程序在各个方面都运行良好。当应用程序加载时,将调用一个服务,该服务从本地存储读取访问密钥,并连接到后端端点以验证访问密钥,并使用用户配置文件进行响应。我调度一个设置用户和身份验证的操作

然而,我意识到这一切发生得太晚了。当用户在受保护的任何路由上着陆时,身份验证的第一个状态为false

我想将我的方法从服务转移到一个在任何选择器响应之前启动时运行的效果。

我找不到任何关于如何做到这一点的参考资料

如何在商店初始化时连接到后端

更新解决方案:

因此,根据@dfil和@Clouse24的建议,为了方便起见,我实现了
APP\u初始值设定项
,这就是我想要连接的地方。我更新了我的守卫如下:

选择器:

export interface LoginStatus {
  loginChecked: boolean;
  loggedIn: boolean;
}
export const loginStatus = createSelector(
  selectAccount,
  account => ({ loginChecked: account.loginChecked, loggedIn: account.loggedIn }) as LoginStatus
);
该接口仅用于返回的类型(不要与我的AccountState混淆)。我正在跟踪查看是否已检查登录名
loginChecked
,这将在成功、失败或错误后更新。在成功之前,
loggedIn
属性为false

我的卫兵:

 return this.store
      .pipe(
        select(loginStatus),
        filter(status => status.loginChecked),
        map(status => status.loggedIn),
        tap(loggedIn => {
          if (!loggedIn) {
            this.router.navigate(['/']);
          }
        }),
        take(1)
      );

一切正常,如预期。如果您发现任何明显的问题或改进,请立即启动。

使用APP\u初始值设定项从存储和分发操作获取数据

导出函数appInitializerFactory( localStorageService:localStorageService, 商店:商店 ) { return()=>{ const auth=localStorageService.tryGetItem('auth')已验证; if(auth){ store.dispatch(新登录(auth)); } }; } 供应商:[ { 提供:应用程序初始化器, useFactory:appInitializerFactory, deps:[LocalStorageService,Store], 多:真的 }
]我认为这可能是你的守卫的问题,而不是你的行动被调用时的问题。您可以使用有效地等待条件为真的防护,而不是确定某个条件为假并完全停止导航。