4.登录用户30分钟未操作，回到登录页

知识点：

• 在 src/App.vue页中做监听；
• 代码 40 行，跳转到登录页有可能是 /或/login；
• 代码 41 行，登出还要做销毁 token 等操作；
• mounted 方法中监听属性 onmousedown 和 onkeydown 事件；

<template>
	<div id="app">
		<router-view/>
	</div>
</template>
<script>
export default {
	data() {
		return {
			//设置超时时间： 30分种
			timeOut : 30 * 60 * 1000,
			lastTimeStoreId: 'lastTime_jc'
		}
	},    
	methods: {
        // 存储当前时间
        setLastTime() {
            localStorage.setItem(this.lastTimeStoreId,new Date().getTime());
        },
        // 获取时间
        getLastTime() {
            return localStorage.getItem(this.lastTimeStoreId);
        },
        // 删除
        removeLastTime() {
            localStorage.removeItem(this.lastTimeStoreId)
        },
        checkTimeout() {
            // 登录页面不监听
            if(this.timeOut && this.$router.currentRoute.name === 'login') {
                this.setLastTime();
            }
            else {
                //更新当前时间
                let currentTime = new Date().getTime();
                let lastTime = this.getLastTime();
                // console.log(currentTime, lastTime, (currentTime - lastTime), this.timeOut);
                //判断是否超时
                if (currentTime - lastTime > this.timeOut) {
                    this.$router.push('/');
                    this.$store.dispatch('user/logout');
                    this.$message({ type: 'warning', message: '界面超过30分钟未操作，需重新登录' })
                }
            }
        },
    },
	mounted() {
		let that = this;
		// 每30秒 调用检查时间的方法
		this.$nextTick(function () {
			setInterval(this.checkTimeout, 30000);
		})
		// 页面监听 按下鼠标更新操作时间
		window.onload = function () {
			window.document.onmousedown = function () {
                that.setLastTime();
            }
            window.document.onkeydown = function () {
                that.setLastTime();
            }
		};
  	}
};
</script>