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

Question

我对如何在React中管理用户会话有疑问,例如在MVC .NET中你只使用Session对象(例如Session["test"] = "";)来做这件事,但显然React不能这样做.

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

有没有更好的方法来管理React中的会话变量而不是localStoragecookie？

Answer 1

我创建了一个名为的 React 模块react-client-session，它使存储客户端会话数据变得非常容易。git 存储库在这里。

这是以与我的其他答案中的闭包方法类似的方式实现的，但是它也支持使用 3 个不同的持久性存储来进行持久性。默认存储是内存（非持久性）。

1. 曲奇饼
2. 本地存储
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"

Answer 2

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

您应该使用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 3

这不是在 React 中管理会话的最佳方式，您可以使用 Web 令牌来加密要保存的数据，您可以使用各种可用的服务，一种流行的服务是带有 Web 令牌的JSON Web 令牌(JWT)，您可以在之后注销一段时间后，如果客户端没有任何操作，在创建令牌后，您可以将其存储在本地存储中以便于访问。

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

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

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

Answer 4

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

或者，我们可以利用react-web-sessioncallback ，它提供了和等选项timeout。