后台没有提供查询Session的接口,所以,用户登录成功后通过ajax查询session是否过期来决定用户长时间无操作后提示重新登录的方法不可行,故只能在前端用js去做个假的监听。
准备:经过一番百度等了解dom常用的事件,js的计时器基本使用, LayUI.layer的基本使用
/**
* 全局监听用户操作,一段时间内无任何点击等操作将提示退出登录,清空缓存
* 监听页面的点击、输入等事件,并重置起始时间
* 登录成功后进行计时,初始化起始时间
* 判断cookie是否存在
* 清除cookie,弹窗提示,默认点击即退回登录页,清除浏览器前进后退历史
* 前后间隔时间 单位毫秒
*/
var oldTime;
var newTime;
var outTime = 15 * 60 * 1000; //设置超时时间:15 分钟
// var outTime = 5 * 1000; //设置超时时间(秒)
// 计时器常量
var timer;
function validTimeOut(){
newTime = new Date().getTime(); //更新未进行操作的当前时间
if(newTime - oldTime >= outTime){ //判断是否超时再进行操作
console.log("时间到,退出登录");
stopTimer();
popUpTimeOut();
}
};
/**
* 超时弹出对话框
*/
function popUpTimeOut(){
// 弹出时停止定时器
if(!timer){
return;
}
stopTimer();
layer.confirm("因长时间待机未进行操作,点击确定重新登录",{
btn:['确定'],
title: "登录超时",
yes: function(index, layero){
onTimeOutLogOut();
window.open('../../login.html','_self');
},
cancel: function(){
onTimeOutLogOut();
window.open('../../login.html','_self');
}
});
};
/**
* 开始计时
* 计时器,每2秒走一次outTime
*/
function startTimer() {
if (window.top != window.self){
;
}else {
if (!timer) {
timer = window.setInterval(validTimeOut, 3000);
}else {
oldTime = new Date().getTime();
}
document.onclick = eventListen;
document.onmousemove = eventListen;
document.ondblclick = eventListen;
document.onkeydown = eventListen;
document.onwheel = eventListen;
}
};
/**
* 停止计时
*/
function stopTimer() {
clearInterval(timer);
// newTime = new Date().getTime();
};
/**
* 超时退出登录
*/
function onTimeOutLogOut(){
var surl=remote_service+"/login/logout?r="+Math.random();
var obj = {url:surl,data:null,type:'get'};
project.myAjax(obj,function(data){
if (data.code=="1000")
{
onLogOutRemoveCookie();
}else{
;
}
});
};
/**
* 监听事件
*/
function eventListen(){
if (!timer) {
return;
}
oldTime = new Date().getTime();
};
/**
* 退出登录时清除cookie
*/
function onLogOutRemoveCookie(){
// 清除
// $.cookie("userToken",null)
// document.cookie = "userToken=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
};
/**
* 所有引用该js的页面载入自动执行
*/
$(function () {
if (window.top.location.pathname != "/"){
startTimer();
}
});
清除cookie的方法没有实现,后来一想没有必要做这个了。在validTimeOut() 方法内可以加个log,每2秒就会在console打印一个毫秒数。该方案只为应付需求,不需要和后台打交道。