Angular + NgRx ::: 在导航到路径之前等待“用户”加载（页面刷新时）

Question

当我刷新页面 (F5) 且应用程序重新启动时，将分派 AuthActions.login 操作以在 (ngrx) 存储中设置用户属性。

stateChanged = onAuthStateChanged(getAuth(), (user) => {
    if (user) { this.store.dispatch(AuthActions.login({ user })); }
    else { console.log('USER-LOGGED-OUT'); }
  });

问题在于，应用程序暂时显示“欢迎”页面，同时仍然从服务器获取“用户”对象，只有在那之后它才会导航到“书籍”页面。

有没有办法等待ngrx设置用户对象在导航到路径之前？

'app.routes.ts'

export const APP_ROUTES: Routes = [
  {
    path: '',
    component: ShellComponent,
    children: [
      {
        path: '', pathMatch: 'full', redirectTo: 'welcome' },
      {
        path: 'welcome',
        loadChildren: async () => (await import('@welcome/feat/welcome')).WELCOME_ROUTES,
      },
      {
        path: '',
        canMatch: [() => inject(Store).select(selectUser).pipe(map((user) => user!!))],
        providers: [provideState(booksFeature),provideEffects(booksEffects)],
        children: [
          {
            path: 'books',
            loadChildren: async () => (await import('@books/feat/books')).BOOKS_ROUTES,
          },
        ],
      },
      {
        path: '**',
        redirectTo: 'welcome',
      },
    ],
  },
];

Answer 1

在您的情况下，我可能会做的是提供一个

APP_INITIALIER

函数，在启动应用程序之前等待服务器响应。

您可以通过在应用程序自举中提供

APP_INITIALIZER

令牌并在

useFactory

属性中传递初始化函数来实现：

function getAuthUser(auth: AuthService): Promise<any> {
  return firstValueFrom(auth.initAuthUser());
}


bootstrapApplication(AppComponent, {
  providers: [
    // ...
    {
      provide: APP_INITIALIZER,
      useFactory: getAuthUser,
      deps: [AuthService],
      multi: true
    },
  ]
})

Angular 现在将等待

getAuthUser

函数在加载应用程序之前解析，您可以在其中运行其他逻辑以确保正确填充您的 AuthStore。