时间戳

首页 > 解决方案 > 反应 SPA。用于处理登录状态的全局状态存储 API？

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

问题描述

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

标签： javascriptreactjsrest

解决方案

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

如果您还没有开始学习存储，那么您执行此操作的方式是将状态存储在父组件中：

this.state = {
    authorised: false,
}

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

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

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

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

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

推荐阅读