我对如何在 React 中管理用户会话存有疑问，例如在 MVC .NET 中，您只能使用 Session 对象（例如Session["test"] = "";）来执行此操作，但显然 React 无法执行此操作。
我正在阅读有关使用组件状态的信息，我想这会在主组件上设置状态并使用 props 将此状态传递给其他组件。我也看到有人推荐使用浏览器localStorage或 cookie，但我不知道这是否是一个好主意或实践。
有没有比localStoragecookie更好的方法来管理 React 中的会话变量？
我会避免使用组件状态，因为这可能难以管理并且容易出现难以解决的问题。
您应该使用cookies或localStorage来持久化用户的会话数据。您还可以使用闭包作为您的cookie或localStorage数据的包装器。
这是一个UserProfile包含用户名的闭包的简单示例。
var UserProfile = (function() {
var full_name = "";
var getName = function() {
return full_name; // Or pull this from cookie/localStorage
};
var setName = function(name) {
full_name = name;
// Also set this in cookie/localStorage
};
return {
getName: getName,
setName: setName
}
})();
export default UserProfile;
当用户登录时，您可以使用用户名、电子邮件地址等填充此对象。
import UserProfile from './UserProfile';
UserProfile.setName("Some Guy");
然后，您可以在需要时从应用程序中的任何组件获取此数据。
import UserProfile from './UserProfile';
UserProfile.getName();
使用闭包将使数据保持在全局命名空间之外，并使其可以从应用程序的任何位置轻松访问。
这不是在 React 中管理会话的最佳方式，您可以使用 Web 令牌来加密要保存的数据，您可以使用各种可用的服务，一种流行的服务是带有 Web 令牌的JSON Web 令牌(JWT)，您可以在之后注销一段时间后，如果客户端没有任何操作，在创建令牌后，您可以将其存储在本地存储中以便于访问。
jwt.sign({user}, 'secretkey', { expiresIn: '30s' }, (err, token) => {
res.json({
token
});
此处的用户对象是您要保留在会话中的用户数据
localStorage.setItem('session',JSON.stringify(token));
有一个名为 React 的modulereact-client-session，可以让存储客户端会话数据变得非常容易。git repo 在这里。
这是以与我的其他答案中的闭包方法类似的方式实现的，但是它也支持使用 3 个不同的持久性存储的持久性。默认存储是内存（非持久）。
安装后，只需设置您挂载根组件的所需存储类型...
import ReactSession from 'react-client-session';
ReactSession.setStoreType("localStorage");
...并从应用程序的任何位置设置/获取键值对：
import ReactSession from 'react-client-session';
ReactSession.set("username", "Bob");
ReactSession.get("username"); // Returns "Bob"
仅举几例，我们可以使用redux-react-session，它具有用于会话管理的良好 API，例如initSessionService、refreshFromLocalStorage、checkAuth等等。它还提供了一些高级功能，例如Immutable JS.
或者，我们可以利用react-web-session提供诸如callback和 之类的选项timeout。