如何在 React 中保持高级用户状态同步？ [关闭]答案

【问题标题】：How to keep the premium users state synced in React? [closed]如何在 React 中保持高级用户状态同步？ [关闭]
【发布时间】：2020-04-28 12:38:48
【问题描述】：

在我的 react 应用程序中，我目前在登录时将其作为 jwt 令牌保存到 localstorage 用户中。

在页面加载时，我的应用程序会检查我是否有用户在本地存储中，如果有，我将状态设置为进行身份验证。这样，我不必在每次页面加载时都进行 api 调用。

但是，现在我的用户有一个 user.isPremium 属性，用于检查用户可以访问应用程序的哪些功能。将高级状态也存储在本地存储中是一种好习惯吗？如果用户的高级状态发生变化，这可能会成为一个问题。

或者在页面加载时进行 api 调用以获取用户和高级状态会更好吗？

【问题讨论】：

那将是很多 API 调用。使用组件状态或像 Redux 这样的状态容器来存储这样的东西，而不是 localStorage。
我会说，使用令牌进行 API 调用。保存在 localStorage 中的任何内容都应该被认为是过时的，并且是最后的便利功能。
@jmargolisvt localStorage 和 state/redux 解决了完全不同的问题。
毫无疑问：您应该在每次应用加载时执行 AJAX 请求，而不是依赖 localstorage 用户对象。这样，您可以确保用户对象与数据库中的任何内容同步，并且您还可以“强制”用户注销（API 调用只是发送令牌，然后返回用户对象）。还想象一下，用户可能在您的数据库中处于“非活动”状态，但令牌仍然有效。

【解决方案1】：

我想说，如果您希望您的应用程序更灵活，请让您的 React 路由对任何“登录请求”请求灵活，并让后端“API 调用”决定页面或功能是否可由用户。

这样，如果您从任何地方而不是您的前端会话将用户更改为 isPremium=False，则对高级功能的 API 调用将失败并显示 HTTP Status Code: 403，并且您的前端决定注销用户或保留用户并提醒不允许的更改。

场景 0

用户向/PremiumFeatureList发出请求，后端将回复HTTP Status Code: 200，用户isPremium=True具有请求功能的能力。

比如把isPremium改成False：

逾期订阅将导致isPremium=False，更改将自动应用到后端

用户向/PremiumFeatureList 发出请求，后端将回复HTTP Status Code: 403，用户isPremium=False 并没有请求该功能的能力。

【讨论】：