Angular7/初始化时NgRX后端鉴权（初始化效果）

Question

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

然而，我意识到这一切发生得太晚了。当用户登陆任何受守卫保护的路线时，第一个身份验证状态为假。

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

我找不到有关如何完成此操作的任何参考。

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

更新解决方案：

因此，根据@dfil 和@Clouse24 的建议，为了方便起见，我实施了 APP_INITIALIZER，这就是我想要连接的地方。我更新了我的守卫如下：

选择器：

export interface LoginStatus {
  loginChecked: boolean;
  loggedIn: boolean;
}
export const loginStatus = createSelector(
  selectAccount,
  account => ({ loginChecked: account.loginChecked, loggedIn: account.loggedIn }) as LoginStatus
);

该接口仅适用于 return 上的类型（不要与我的 AccountState 混淆）。我正在跟踪以查看是否检查了登录 loginChecked，这是在成功、失败或错误后更新的。 loggedIn 属性在成功之前是假的。

我的守卫：

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

一切正常，符合预期。如果您发现任何明显的问题或改进，请开火。

Answer 1

使用 APP_INITIALIZER 从存储和调度操作中获取数据。

 export function appInitializerFactory(
    localStorageService: LocalStorageService,
    store: Store<AuthState>
) {
    return () => {
        const auth = localStorageService.tryGetItem('auth') as Authenticated;
        if (auth) {
            store.dispatch(new Login(auth));
        }
    };
}
 
 
 providers:[
 {
       provide: APP_INITIALIZER,
       useFactory: appInitializerFactory,
       deps: [LocalStorageService, Store],
       multi: true
}
]

第二个选项是制作一个等待存储初始化的守卫。

Angular7/初始化时NgRX后端鉴权（初始化效果）

Angular 7/NgRX back-end authentication at initialization (initialization effect)

ngrx

ngrx-effects

angular

ngrx-store