项目场景：
公司项目需求要求页面无操作三十分钟之后就自动返回到登录页。
解决方案：
项目使用的vue技术，所以我是在App.vue添加
<template><div id="app"><router-view /></div>
</template>
<script>
export default {data() {return {//设置超时时间： 30分种timeOut: 30 * 60 * 1000,}},methods: {// 存储当前时间setLastTime() {localStorage.setItem('lastTime', new Date().getTime());},// 获取时间getLastTime() {return localStorage.getItem('lastTime');},checkTimeout() {// 登录页面不监听if (this.timeOut && this.$router.currentRoute.name === 'login') {this.setLastTime();}else {//更新当前时间let currentTime = new Date().getTime();let lastTime = this.getLastTime();//判断是否超时if (currentTime - lastTime > this.timeOut) {this.$router.push('/login');this.$message({ type: 'warning', message: '长时间未操作,需重新登录' })document.title='登录页'localStorage.removeItem("Authorization");}}},},mounted() {let that = this;// 每30秒 调用检查时间的方法this.$nextTick(function () {setInterval(this.checkTimeout, 30000);})// 页面监听 按下鼠标更新操作时间window.onload = function () {window.document.onmousedown = function () {that.setLastTime();}};}
};
</script>
<style>
html,
body,
#app {height: 100%;width: 100%;padding: 0;margin: 0;margin-top: 0;
}
</style>注意:这样可能会出现一登录之后由于没有马上点击页面导致马上返回到导航舱，所以需要在封装请求那里，一旦接口返回就刷新lastTime
localStorage.setItem('lastTime', new Date().getTime());
