时间戳

首页 > 解决方案 > Angular 7/NgRX 初始化时的后端认证（初始化效果）

angular - Angular 7/NgRX 初始化时的后端认证（初始化效果）

问题描述

我有一个使用 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
);

该接口仅适用于返回的类型（不要与我的 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)
      );

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

标签： angularngrxngrx-storengrx-effects

解决方案

使用 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
}
]

第二种选择是做一个守卫，等待商店被初始化。

推荐阅读