Angular ngrx / store with canActivate route guard

Question

我开始使用ngrx / store并将其与angular / router结合使用。到目前为止一切都那么好，除了我无法从我的后卫canActivate方法中的商店中选择。 当从组件内的商店中选择和订阅时，一切正常，但是当尝试在canActivate函数中检索一个值时，它仍然保持返回未定义。

从我的理解，听起来合乎逻辑，canActivate方法在初始化存储之前运行（因为它返回undefined，而不是初始状态）。 我一直在阅读很多，但没有找到解释这种行为的正确答案。

Firebase Auth +路由+ Ngrx

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

• 以表格形式输入凭据。
• 点击提交，这将发送一个登录操作。
• 将触发ngrx /效果，尝试使用firebase / auth登录：返回LOGIN_SUCCESS或LOGIN_FAILED。
• 当LOGIN_SUCCESS时，参数“loggedIn”在肯定中设置为True，用户被重定向到主页（/ home）。
• 在（/ home）端点上实现了一个guard（canActivate），它检查用户是否使用store属性（loggedIn）登录。
• 期望false或true，但商店只在select调用中返回“undefined”。 （但它通过订阅在组件内部正常工作）。

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

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

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

• 发送操作以确保商店已初始化。
• 使用firebase.auth observable和bypass store。

感谢您阅读和理解。

Answer 1

您是否检查了商店的初始状态？ 像这样的东西：

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

export interface UserState {
  user: Userbean;
}

当您检查商店时，可以确保通过选择的过滤器来传递商店初始化，例如：

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

希望可以帮助您：）