反应 SPA。用于处理登录状态的全局状态存储 API？

Posted 2023-03-10

【中文标题】反应 SPA。用于处理登录状态的全局状态存储 API？

【英文标题】：React SPA. API for global state store for handling login state?

【发布时间】：2019-02-27 12:40:15

【问题描述】：

所以我在我的网站的根目录中有这个 React 组件，它是登录页面，我们称它为 A。如果登录成功，它将登录状态设置为 true，然后切换到另一个页面，然后沿着这些页面的树向下（假设我有 A，那么 B 是 A 的孩子，C 是 B 的孩子）。假设在 CI 对后端进行休息调用并返回 401（无论出于何种原因，他们不被允许或他们的令牌已过期），然后我知道该人不应该登录，因此它应该自动将登录状态设置为A 为假。 我想知道是否有办法通过全局状态管理器来做到这一点？我想这与 Redux 类似，但 Redux 也要求您将存储传递到组件树中，我觉得这有点麻烦且难以组织好。如果我可以拥有一个可以导入的全局状态存储，那就太好了。

【问题讨论】：

如果 A 中的状态决定了如何渲染 B 和 C，那么将处理程序向下传递是否有意义？有问题吗？

只是看起来有点麻烦

【参考方案1】：

在这种情况下，您应该使用商店来维护整个应用的身份验证状态。您可以简单地将其注入任何组件并更新值，并让任何其他需要检查的组件引用它。

如果您还没有开始学习存储，那么您可以将状态存储在父组件中：

this.state = 
    authorised: false,

然后添加一个函数来更新这个：

setAuthorisation(value)
    this.setState(authorised: value)

现在您所要做的就是将这两个传递给您的子组件，它们可以随时更新和引用

<Child authCallback=this.setAuthorisation isAuthorised=this.state.authorised />

你真的应该自己研究这个，因为它是 react 的基础之一 :)