Question

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

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

这里是用来理解我所指的内容的代码：

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

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调用成功设置sessionStorage的键值。在随后的api调用中，我发回我在响应头中第一次调用时收到的令牌以进行身份验证。

我的问题是2折：

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

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

Answer 1

这是非常主观的。如果这种方法适合你，那没关系。 Cookies也是一个不错的选择，它取决于它。你提到你使用当前的方法有一些麻烦（主要是页面刷新）。一个cookie可以帮助，但也不是一些银弹。明智地选择最适合您应用的应用程序（考虑一下您是否希望从库中调用服务器调用等，这可能会在使用Cookie时引入更多烦恼。
由于您已经在sessionStorage中存储了某些内容，因此您也可以选择将数据存储在localStorage中。这将确保它保持不变，并且由于节省了时间，您基本上提供了自己的会话存储，这可以在刷新后继续存在。

旁注，sessionStorage不应该在刷新时自行重置，它位于标签上下文中。因此，如果您打开一个新选项卡，则会获得一个新会话，如果您刷新，则应该具有相同的存储空间。根据您的应用程序，您可能希望查看某处是否替换数据，或者是否在不同的选项卡中进行刷新。

保持用户在react flux应用程序中登录？

1 个答案: