角7/NgRX后端初始化身份验证(初始化效果)

Question

我有一个使用NgRX存储的角度应用程序，作为这个存储的一部分，我具有用户配置文件和身份验证状态。这个应用程序运行得很好。当应用程序加载时，调用一个服务，该服务从本地存储读取access_key，并连接到后端端点以验证access_key并使用用户配置文件进行响应。我发出一个设置用户和身份验证的操作。

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

I希望将我的方法从服务移到在任何选择器响应之前运行的效果。

我找不到做这件事的任何参考资料。

如何在存储初始化时连接到后端？

更新解决方案：

因此，基于这里来自@dfil和@Clouse24 24的建议，为了方便起见，我实现了APP_INITIALIZER，这就是我希望将事情连接起来的地方。我更新了我的警卫如下：

选择器：

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

接口只适用于返回时的类型(不要混淆我的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
}
]

​

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