vue实现长时间无操作自动返回登录页

最新推荐文章于 2023-06-07 11:34:45 发布

置顶一个喜欢弹吉他的程序猿

最新推荐文章于 2023-06-07 11:34:45 发布

阅读量2.9k

点赞数 23

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_43482627/article/details/109162158

版权

本文介绍了一种在Vue.js应用中实现用户在一分钟内无操作自动登出的功能。通过使用Vuex来管理最后操作时间，并利用定时器实时更新当前时间，从而判断是否达到设定的一分钟无操作时长。此外，还介绍了如何通过postMessage机制让子iframe页面与父页面进行通信，以确保整个系统的自动登出功能完整实现。

摘要由CSDN通过智能技术生成

需求

实现系统一分钟无操作，自动退出登录。

系统大致框架

一个父级系统，用iframe嵌套了一个子级系统。

主要实现思路

将最后一次操作时间lastTime存放在vuex中，当前时间currentTime实时更新。
即时判断当前时间currentTime 减去最后一次操作时间lastTime 的值是否大于一分钟。

第一步

在vuex中定义lastTime，并写好对应的方法。
在这里插入图片描述

第二步

实时更新当前时间，先在data中定义。

data() {
    return {
      timer: "", //定时器
      currentTime: new Date().getTime(),//得到的是毫秒值
      timeOut: 60 * 1000, //设置过期时间
    };
  },

需要用到定时器

created() {
    this.$store.commit("updateLastTime");//更新最后一次操作时间
    var vm = this;//防止this指向改变
    vm.timer = setInterval(() => {
      //定时修改currentTime的值
      vm.currentTime = new Date().getTime();
    }, 1000);
  },

记得销毁定时器

beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },

第三步

监听currentTime，实时与lastTime比较

watch: {
    currentTime: function (newVal) {
      if (newVal - this.$store.state.lastTime > this.timeOut && this.$router.currentRoute.path != '/') {
        this.$message.warning("登录信息已过期，请重新登录");
        setTimeout(() => {
          this.$router.push({ path: "/" });
        }, 300);
        this.$store.commit("updateLastTime");
      }
    },
  },

页面被点击，就更新最后操作时间。
在这里插入图片描述

到此，完成了父级系统一分钟无操作自动退出。
但是我们还有一个iframe子系统。
这里涉及到iframe子页面与父页面的通信。
我采用postMessage，因为允许跨域。

第一步

子页面被点击，就向外发出信息。
在这里插入图片描述

第二步

父页面接收信息。

mounted() {
    //监听iframe变化
    window.addEventListener("message", (eve) => {
      //接收到信息，就改变最后操作时间
      this.$store.commit("updateLastTime");
    });
  },