我正在使用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。还有另外一种方法吗?
答案 0 :(得分:0)
sessionStorage
中存储了某些内容,因此您也可以选择将数据存储在localStorage中。这将确保它保持不变,并且由于节省了时间,您基本上提供了自己的会话存储,这可以在刷新后继续存在。旁注,sessionStorage
不应该在刷新时自行重置,它位于标签上下文中。因此,如果您打开一个新选项卡,则会获得一个新会话,如果您刷新,则应该具有相同的存储空间。根据您的应用程序,您可能希望查看某处是否替换数据,或者是否在不同的选项卡中进行刷新。