JavaScript 实现前端登录超时提示重新登录

后台没有提供查询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打印一个毫秒数。该方案只为应付需求，不需要和后台打交道。