/**
* 作者:superzuo
* 时间:2023/05/08 09:39:41
* 功能:监听鼠标点击事件,然后判断用户停留时间,超时则重新登录
*/
import { Modal } from 'ant-design-vue';
import router from '@/router';
import axios from "@/utils/AxiosUtil";
import JSCookie from 'js-cookie';
import store from "@/store";
class listerMosedowm {
constructor() {
/* 超时时间 秒 */
this.timeOut = 60 * 30;
/* 记录最后一次操作时间 */
this.lastTime = this.getNowTime();
/* 定时任务 */
this.timerFunc = null;
}
start() {
if (!this.timerFunc) {
this.clearTimer();
}
/* 监听鼠标事件 */
this.listenerEvent();
/* 判断是否登录页 */
if (!this.isLoginPage() && this.isLogin()) {
this.timerFunc = window.setInterval(() => {
this.listenerTimeout();
}, 1000)
}
}
/* 判断是否登录 */
isLogin() {
let userName = JSCookie.get('UserName');
return !!userName;
}
/* 检测是否超时 */
listenerTimeout() {
if (this.isTimeout() && !this.isLoginPage()) {
this.clearTimer();
this.removeToken();
}
}
/* 判断是否是登录页面 */
isLoginPage() {
return router.currentRoute.path.indexOf("/login") !== -1;
}
/* 清除登录信息 */
removeToken() {
let _this = this;
Modal.warning({
title: '登录提示',
content: '您已超过30分钟未操作,为了保证您的账号安全,请重新登录!',
okText: '重新登录',
onOk() {
_this.goLogin();
},
})
}
/* 登录 */
goLogin() {
let query = router.currentRoute.query;
query.backUrl = router.currentRoute.path;
/* 避免登录跳转时自动跳转回来 */
store.commit('homeConfig/saveUserState', {userName: 'GUEST', name: 'GUEST'});
/* 清除cookie */
JSCookie.remove("UserName");
/* 清除JSSIONID */
axios.get("/custom/user-extend/session/remove").then((res) => {
router.push({path: '/login', query: query});
}).catch(() => {
window.location.reload();
})
}
/* 对象转参数 */
paramsTourl(obj) {
let aUrl = []
let fnAdd = function (key, value) {
return key + '=' + value
}
for (let k in obj) {
aUrl.push(fnAdd(k, obj[k]))
}
return encodeURIComponent(aUrl.join('&'))
}
/* 判断是否超时 */
isTimeout() {
return Math.round(this.getNowTime() - this.lastTime) > this.timeOut;
}
/* 监听鼠标事件 */
listenerEvent() {
window.addEventListener("mousedown", () => {
this.lastTime = this.getNowTime()
})
}
/* 获取当前时间戳 */
getNowTime() {
/* 转换为 秒 */
return Math.round(new Date().getTime() / 1000);
}
/* 清除定时器 */
clearTimer() {
clearInterval(this.timerFunc);
this.timerFunc = null;
}
}
export default () => {
let lisMd = new listerMosedowm();
lisMd.start();
};
//在main.js应用
Vue.use(listenerMosedoum);
代码写在这里,需要的可自行改造~