1. 前言：

当我们长时间未操作页面的时候，系统应自动退出，这也是一种自我保护机制吧。

由于VUE是单页面应用，这个功能实现起来相对来说简单一点。

2. 前端代码修改：

思路: 在初始化页面的时候，会记录初始化的时间，在


上加一个click方法，当你点击系统中任意页面中任何地方都会触发这个方法。如果已经超时，而且已登录，就会有提醒，并且跳转到登录页面。


如不超时，则更新初始时间。

<template>
  <div id="app" @click="isTimeOut">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  created() {
    this.lastTime = new Date().getTime();
  },
  data(){
    return{
      lastTime: null,
      currentTime: null,
      timeOut: 6*1000  //超时时间
    }
  },
  methods:{
    isTimeOut(){
      this.currentTime = new Date().getTime();
      if(this.currentTime - this.lastTime > this.timeOut){
        //如果处于登录状态，超时不操作，给出警告，跳转至登录页面
        if(localStorage.getItem('Authorization')){
          //清空登录信息
          localStorage.removeItem("userName");
          localStorage.removeItem("Authorization");
          localStorage.removeItem("signTime");
          //弹出框提醒，页面跳转
          window.alert("长时间未操作，请重新登录");
          window.location.href = '/';
        }
      }else{
        this.lastTime = new Date().getTime();
      }
    }
  }
}
</script>

<style>
。。。。。。
</style>
  • 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.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.

3. 测试

微服务和VUE入门教程(22): 页面长时间未操作自动退出登录_微服务