前端无操作一段时间返回登录页

追风筝的少女2024-06-04 19:28

项目场景：

公司项目需求要求页面无操作三十分钟之后就自动返回到登录页。

解决方案：

项目使用的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());