带有canActivate路由防护的Angular Ngrx /商店

Question

我已经开始使用ngrx / store并将其与angular / router结合使用。 到目前为止，一切都很好，除了我无法从我的后卫的canActivate方法内部的商店中进行选择。 从组件内部的存储中选择和订阅时，一切正常，但是尝试在canActivate函数中检索值时，它始终返回未定义的值。

根据我的理解，听起来很合理，canActivate方法在初始化存储之前正在运行（因为它返回的是未定义状态，而不是初始状态）。 我读了很多书，但是没有找到一个很好的答案来解释这种行为。

Firebase身份验证+路由+ Ngrx

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

• 输入表单凭据。
• 单击提交，这将调度LOGIN操作。
• 尝试使用firebase / auth登录时，将触发ngrx / effect：返回LOGIN_SUCCESS或LOGIN_FAILED。
• 当使用LOGIN_SUCCESS时，肯定会将参数“ loggedIn”设置为True，并且用户将被重定向到主页（/ home）。
• 在（/ home）端点上实现了保护（canActivate），该保护检查用户是否使用store属性（loggedIn）登录。
• 期望为false或true，但是存储只是在select调用中返回“ undefined”。 （但是，通过订阅它确实可以在组件内部正常工作）。

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

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

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

• 调度操作以确保商店已初始化。
• 使用可观察的firebase.auth和绕过存储。

感谢您的阅读和理解。

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和路由重定向的方法： 从canActivate方法返回Observable <boolean>，并在false时重定向

希望可以有所帮助:)