1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| <template> <div id ="app" @click="isDo()"></div> </template>
<script> exoprt default{ data(){ return{ lastTime:null, //第一次点击事件 currentTime:null, //当前点击事件 timeOut:30*60*1000 // 设置超时时间:30分钟 } }, created(){ this.lastTime = new Date().getTime(); // 网页第一次打开时,记录当前时间 }, mounted(){ var quitTIme = window.setInterval(this.testTime,1000); }, methods:{ isDo(){ this.currentTime = new Date().getTime(); // 记录当前点击的时间 if(this.currentTIme - this.lastTime > this.timeOut){ //判断上次最后一次的点击时间和最新的点击时间间隔时候大于30分钟 // 这里写状态已过期后执行的操作 localStorage.removeItem("token"); this.$router.push({ path: '/login' }); // 清除定时器 window.clearInterval(quitTIme); }else{ this.lastTime = new Date().getTime(); //如果30分之内点击,则把最新时间记录覆盖掉之前存的最后一次点击时间 } } } } </script>
|
Vue判断用户长时间未操作清除token并退出登录