保持用户登录，在反应通量应用程序中

Keeping user logged in, in a react flux app?

本文关键字：应用程序 用户 登录      更新时间：2023-09-26

我正在开发一个 react-flux 应用程序，我正在使用 sessionStorage 通过检查 sessionStorage 中是否有电子邮件和身份验证令牌来保持用户登录。如果它们可用并且自登录以来的时间少于 15 分钟，我会触发 flux 操作以登录用户。我还有另一个功能，无论在 15 分钟后通过清除会话存储将用户注销。

它工作正常，直到我刷新页面。此时，在 15 分钟后注销用户的 setInterval 函数会自行重置。

以下是理解我所指内容的代码：

在我的父组件中，我有以下函数，我在组件DidMount函数中调用这些函数。

checkSession: function() {
    if (!_.isNull(window.localStorage)) {
      var currentTimeStamp = Date.parse(new Date());
      var logInStamp = window.sessionStorage.time;
      var difference = currentTimeStamp - logInStamp;
      if (Math.floor((difference / 1000) / 60) < 15) {
        var data = {
          email: window.sessionStorage.email,
          scheduler_slug: window.sessionStorage.slug
        };
        ActionCreator.loginUser(data);
      }
    }
  },
  logOut: function() {
    if (this.state.isLoggedIn === true) {
      window.sessionStorage.clear();
      ActionCreator.logOutUser();
    }
  },
  componentDidMount: function() {
    Store.addChangeListener(this._onChange);
    this.checkSession();
    setInterval(this.logOut, 900000);
  }

我正在为会话存储设置键值，因为我的 ajax 调用成功以创建会话。在随后的 api 调用中，我将从响应标头中的第一个调用中收到的令牌发回以进行身份验证。

我的问题是 2 个方面：

1） 我当前的方法是否足以维持用户会话？使用饼干会更好吗？

2）如果我目前的方法很好，那么我需要找到一种方法来防止计时器在页面刷新时重置，我认为这是一个简单的解决方法，但我所看到的一切都涉及使用cookie。还有别的办法吗？

  1. 这是非常主观的。如果这种方法对您有用，那没关系。饼干也是一个不错的选择，这取决于。您提到使用当前方法时遇到了一些麻烦（主要是页面刷新）。饼干可能会有所帮助，但也不是灵丹妙药。明智地选择最适合您的应用程序的内容（考虑您是否希望从库等调用服务器调用，这可能会在使用 cookie 时带来更多烦恼。
  2. 由于您已经在sessionStorage中存储了一些东西，因此您也可以选择将数据简单地存储在localStorage中。这将确保它保持不变，并且由于节省了时间，您基本上提供了自己的会话存储，从而在刷新后幸存下来。

旁注，sessionStorage不应该在刷新时重置自身，它位于选项卡上下文中。因此，如果您打开一个新选项卡，您确实会获得一个新会话，如果您刷新，您应该拥有相同的存储空间。根据你的应用，你可能想要查看是否在某处替换数据，或者刷新是否发生在其他选项卡中。

相关文章：