vue中使用js判断30分钟界面无操作自动退出或清楚用户信息重新登录

需求

        为了保证用户数据的安全性，很多时候当用户长时间不对页面进行操作的时候，自动退出系统，清除个人信息以防止有别人使用用户的数据。

流程

        使用 onmousedown 鼠标事件来检测用户是否有操作页面，写一个定时器间隔特定时间检测是否长时间未操作页面。如果长时间未操作页面，退出登录，清除token，返回登录页面。

        用户第一次登录或获取一个时间戳，用户每点击操作一次回重新获取一个新的时间戳，每隔一段时间回执行一次一下js方法判断当前时间戳是否大于之前时间戳30分钟，大于则清除用户信息。

let lastTime = new Date().getTime();
let currentTime = new Date().getTime();
let timeOut = 30 * 60 * 1000; //设置超时时间： 30分
// let timeOut = 5000; //设置超时时间： 30分

window.onload = function() {
	window.document.onmousedown = function() {
		localStorage.setItem("lastTime", new Date().getTime());
	}
};
export function checkTimeout() {
	currentTime = new Date().getTime(); //更新当前时间
	lastTime = localStorage.getItem("lastTime");
	console.log("当前时间-登录存的时间", currentTime - lastTime);
	console.log("设置超时时间", timeOut);
	 //判断是否超时
	if (currentTime - lastTime > timeOut) {
		// 超时可在此处做自己想要完成的业务,比如退出登录或者清除用户信息重新登录等
		console.log("超时", window.location.href);
		let url = window.location.href;
		let newUrl = url.match(/(\S*)#/)[1];
		console.log("超时之后的地址", url, newUrl)
		// window.open(newUrl + '#/login','_self');
		// 提示
		uni.showToast({
			title: "sadasd",
			icon: "error"
		})
	}
}

/* 定时器 间隔30秒检测是否长时间未操作页面 */
window.setInterval(checkTimeout, 5000);