vue页面长时间未操作,弹出提示,清除token,退出登录

一、背景

今天突然来了任务，把项目更新一下，把安全性增加，当用户长时间不操作电脑的时候，为了防止别人进行操作，弹出提示，清除token,退出登录，进入登录页，重新登录；如果在登录页面，则不需要弹窗提示，别忘掉这种情况。

二、实现

1. 在App.vue里进行配置

<template>
    <a-locale-provider :lacale="locale"> // ant desing自带切换中英文的组建套在项目最外层即可（传递属性控制）
        <div id="app" @click="isTimeOut">
            <router-view />
        </div>
    </a-locale-provider>
</template>


<script>
    data() {
        return {
            lastTime: null, // 鼠标最后一次点击时间
            timeOut: 30 * 60 * 1000, // 三十分钟未检测到鼠标点击就退出
        }    
    },
    created() {
        this.lastTime = new Date().getTime()  
    },
    methods: {
        isTimeOut () {
            var currentTime = new Date().getTime()
            if (currentTime - this.lastTime > this.timeOut) {
                if (sessionStorage.getItem('token')) { // 如果是登录状态
                    sessionStorage.clear()
                    Modal.warning({ // 使用的是antd的warning框，可以用其他的弹窗
                        title: '提示',
                        content: '长时间未操作，请重新登录',
                        onOk: async () => {
                            this.$router.replace('/login')
                            this.lastTime = new Date().getTime()
                        }
                    })
                } else {
                    this.lastTime = new Date().getTime()
                }
            } else {
                this.lastTime = new Date().getTime()
            }
        }
    }
</script>