通过后端判断自动登出时，需要前端发起主动请求，故选择vue前端实现。
思路：
1、在首次进入页面，及每次对页面进行点击操作时，记录点击时间，作为最后一次操作记录lastTime；
2、设置定时器，每隔固定时间检查一次当前时间和最后操作时间的差值，若超出规定时长，则返回登录页，并清除cookie；
3、在App.vue中实现以下代码；
<template>
<div id="app" @click="isLastTime()">
<router-view></router-view>
</div>
</template>
<script>
import {setCookie} from '@/util/cookie';
export default {
name: 'App',
data () {
return {
lastTime: null, // 记录最后一次点击时间
currentTime: null, // 记录当前时间
timeOut: 30 * 60 * 1000 // 设置未操作时长30分钟
}
},
created () {
this.lastTime = new Date().getTime();
},
mounted () {
this.isTimeOut();
},
methods: {
// 封装定时检查函数
isTimeOut () {
setInterval(() => {
this.currentTime = new Date().getTime(); // 记录当前时间
if (this.currentTime - this.lastTime > this.timeOut) { // 判断当前时间和最后一次操作时间差，若超过30分钟，则返回登录界面
if (this.$route.path !== '/login') { // 判断超过30分钟时，是否在登录界面，如不在则返回登录界面。（这里就是做个简单示意，通常用登录状态来判断）
setCookie('username',''); // 简单清除cookie，实际应用清除登录状态
this.$router.push('/login'); // 返回登录页面
}
}
},600000) // 每隔10分钟检查一次
},
// 每次点击时记录当前时间作为最后操作记录
isLastTime () {
this.lastTime = new Date().getTime();
}
}
}
</script>
