vue前端页面长时间无操作时，系统自动退出登录页面

一、背景

为了保证用户操作数据的安全性，很多时候当用户长时间不操作电脑的时候，应该给用户自动退出系统，这样可以防止有别人使用电脑操作上一个用户的数据。

二、思路

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

三、代码实现

<script>
    data() {
        return {
            lastTime: null, // 鼠标最后一次点击时间
            currentTime: null, // 当前时间
            sys_timeout: 10 * 60 * 1000, // 系统安全时间
            check_time: 30 * 1000, //探测间隔时间
            timer: null,  // 定时器
        }    
    },
    mounted() {
        this.currentTime = new Date().getTime();
        this.lastTime = new Date().getTime();
        // 监听鼠标点击时间，获取最后一次点击时间
        window.document.onmousedown = (event) => {
          console.log('重置最后一次点击时间');
          this.lastTime = new Date().getTime();
        }
        this.onload();    
    },
    destroyed() {
        clearInterval(this.timer)
    }
    methods: {
        // 间隔特定时间检测系统无操作时间
        onload() {
          this.timer = window.setInterval(this.checkTimeOut, this.check_time)
        },
        // 判断系统无操作时间是否大于安全时间
        checkTimeOut() {
          this.currentTime = new Date().getTime();
          if(this.currentTime - this.lastTime > this.sys_timeout) {
                // todo 退出登录
          }
        }
    }
</script>