好吧,我会把我的两分钱投入这里。
尽管理论上可以使用rolling session
,我认为你不应该...
- 它将要求每个用户操作向服务器发送请求,以便用户不被注销。
- 您错过了通知用户他/她将很快自动注销的机会(例如,银行就是这么做的)。
@Seth 在上面的评论中确实指出,实际上有一种方法可以解决这个问题:“如果前端与服务器分开,您可以使用客户端路由中间件来检查 cookie 并以可视方式将您注销,从而证明良好的用户体验。”
我认为这很聪明,但我也认为这就像给猪涂口红一样。
我认为最好的方法是在客户端 https://stackoverflow.com/questions/667555/detecting-idle-time-in-javascript-elegantly.
我会建议这样的事情:
var AutoLogout = (function() {
function AutoLogout() {
this.events = ['load', 'mousemove', 'mousedown',
'click', 'scroll', 'keypress'];
this.warn = this.warn.bind(this);
this.logout = this.logout.bind(this);
this.resetTimeout = this.resetTimeout.bind(this);
var self = this;
this.events.forEach(function(event) {
window.addEventListener(event, self.resetTimeout);
});
this.setTimeout();
}
var _p = AutoLogout.prototype;
_p.clearTimeout = function() {
if(this.warnTimeout)
clearTimeout(this.warnTimeout);
if(this.logoutTimeout)
clearTimeout(this.logoutTimeout);
};
_p.setTimeout = function() {
this.warnTimeout = setTimeout(this.warn, 29 * 60 * 1000);
this.logoutTimeout = setTimeout(this.logout, 30 * 60 * 1000);
};
_p.resetTimeout = function() {
this.clearTimeout();
this.setTimeout();
};
_p.warn = function() {
alert('You will be logged out automatically in 1 minute.');
};
_p.logout = function() {
// Send a logout request to the API
console.log('Sending a logout request to the API...');
this.destroy(); // Cleanup
};
_p.destroy = function() {
this.clearTimeout();
var self = this;
this.forEach(function(event) {
window.removeEventListener(event, self.resetTimeout);
});
};
return AutoLogout;
})();
es2015
class AutoLogout {
constructor() {
this.events = ['load', 'mousemove', 'mousedown',
'click', 'scroll', 'keypress'];
this.warn = this.warn.bind(this);
this.logout = this.logout.bind(this);
this.resetTimeout = this.resetTimeout.bind(this);
this.events.forEach((event) => {
window.addEventListener(event, this.resetTimeout);
});
this.setTimeout();
}
clearTimeout() {
if(this.warnTimeout)
clearTimeout(this.warnTimeout);
if(this.logoutTimeout)
clearTimeout(this.logoutTimeout);
}
setTimeout() {
this.warnTimeout = setTimeout(this.warn, 29 * 60 * 1000);
this.logoutTimeout = setTimeout(this.logout, 30 * 60 * 1000);
}
resetTimeout() {
this.clearTimeout();
this.setTimeout();
}
warn() {
alert('You will be logged out automatically in 1 minute.');
}
logout() {
// Send a logout request to the API
console.log('Sending a logout request to the API...');
this.destroy(); // Cleanup
}
destroy() {
this.clearTimeout();
this.events.forEach((event) => {
window.removeEventListener(event, this.resetTimeout);
});
}
}
部分轮询解决方案:
var activityPolling = (function() {
var events = ['load', 'mousemove', 'mousedown', 'click', 'scroll', 'keypress'];
var active = true;
var timeout;
function poll() {
if(active) {
console.log('polling the server...')
}
}
function setIdle() {
active = false;
}
function setActive() {
active = true;
if(timeout)
clearTimeout(timeout);
timeout = setTimeout(setIdle, 30 * 60 * 1000);
}
function destroy() {
clearInterval(interval);
events.forEach(function(event) {
window.removeEventListener(event, setActive);
});
}
events.forEach(function(event) {
window.addEventListener(event, setActive);
});
setActive();
var interval = setInterval(poll, 60 * 1000);
return {
interval: interval,
destroy: destroy
}
})();