Question

我怀疑如何在React中管理用户的会话，例如在MVC .NET中你只使用Session对象（例如Session["test"] = "";）来做这件事，但显然React不能这样做。 / p>

我正在阅读有关使用组件状态的信息，我想在主组件处设置状态并使用props将此状态传递给其他组件。我也看到人们建议使用浏览器的localStorage或cookie，但我不知道这是不是一个好主意或实践。

是否有更好的方法来管理React中的会话变量而不是localStorage或Cookie？

Answer 1

我会避免使用组件状态，因为这可能很难管理，并且容易出现难以排除故障的问题。

您应该使用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();

使用闭包会将数据保留在全局命名空间之外，并且可以从应用程序的任何位置轻松访问它。

Answer 2

这不是管理会话的最佳方式，您可以使用网络令牌加密您想要保存的数据，您可以使用各种可用的服务，一个受欢迎的服务是JSON web tokens（JWT）与网站 - 如果客户端没有任何操作，您可以在一段时间后注销令牌。创建令牌后，您可以将其存储在本地存储中以便于访问。

jwt.sign({user}, 'secretkey', { expiresIn: '30s' }, (err, token) => {
    res.json({
      token
  });

此处的用户对象是您要保留在会话中的用户数据

localStorage.setItem('session',JSON.stringify(token));

Answer 3

仅举几例，我们可以使用redux-react-session，它具有用于会话管理的良好API，例如initSessionService，refreshFromLocalStorage，checkAuth等。它还提供了一些高级功能，例如Immutable JS。

或者，我们可以利用react-web-session来提供callback和timeout之类的选项。

Answer 4

有一个名为react-client-session的React模块，它使存储客户端会话数据非常容易。 git仓库是here。

这与关闭方法in my other answer的实现方式类似，但是它也支持使用3种不同的持久性存储的持久性。默认存储为内存（非持久性）。

饼干
localStorage
sessionStorage

安装后，只需设置所需的存储类型即可在其中安装根组件...

import ReactSession from 'react-client-session';

ReactSession.setStoreType("localStorage");

...，并从应用程序中的任何位置设置/获取键值对：

import ReactSession from 'react-client-session';

ReactSession.set("username", "Bob");
ReactSession.get("username");  // Returns "Bob"

在React中管理用户会话的最佳方法是什么？

4 个答案: