带有 canActivate 路由保护的 Angular ngrx/store

Question

我已经开始使用 ngrx/store 并将其与 angular/router 结合使用。到目前为止一切顺利，除了我无法从我的守卫的 canActivate 方法中工作的商店中进行选择。
在组件内的商店中选择和订阅时，一切正常工作，但是在尝试检索Canactivate函数内的值时，它会保持返回返回。

根据我的理解，这听起来很合乎逻辑， canActivate 方法在 store 初始化之前运行(因为它返回 undefined，而不是初始状态)。
我读了很多书，但没有找到解释这种行为的体面答案。

Firebase 身份验证 + 路由 + Ngrx

我的用例是我使用 Firebase Auth + Ngrx + Router 设置了身份验证。流程如下:

在表单中输入凭据。

单击提交，这将发送一个 LOGIN 操作。

将触发 ngrx/effect，尝试使用 firebase/auth 登录:返回 LOGIN_SUCCESS 或 LOGIN_FAILED。

当LOGIN_SUCCESS时，参数“loggedIn”肯定设置为True，并且用户被重定向到主页(/home)。

在 (/home) 端点上实现了一个守卫 (canActivate)，它检查用户是否使用商店属性 (loggedIn) 登录。

期望 false 或 true，但商店在 select 调用中简单地返回“undefined”。 (但是，它确实通过订阅在组件内部正常工作)。

此外，我在 Redux 开发人员工具中看到的是，在 LOGIN_SUCCESS 完成之前，路由被取消了；这是另一个问题。但是，我仍然希望检索 false 而不是 undefined。

有人可以解释我为什么会这样吗？

目前我看到两个黑客，但我不喜欢它们。

调度一个 Action 以确保商店被初始化。

使用 firebase.auth observable 和绕过存储。

感谢您的阅读和理解。

Answer 1

您是否检查过商店的初始状态？
类似的东西:

export const initialUserState: UserState = {
  user: null
};

export interface UserState {
  user: Userbean;
}

当你检查你的商店时，你可以确保你通过 store init 并在你的选择上使用过滤器，就像这样:

store.pipe(
      select(getUser),
      filter(user=> !!user && user.loggedIn !== null)
    );

这篇文章关于实现登录操作的方式非常好:
https://mherman.org/blog/authentication-in-angular-with-ngrx/

这是在 canActivate 方法中处理 Observable 和路由重定向的方法:
Returning an Observable<boolean> from canActivate method and redirect on false

希望可以帮助:)