js 监听鼠标事件，超时未操作退出登录

/**
 * 作者：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);

代码写在这里，需要的可自行改造~