需求

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

系统大致框架

一个父级系统，用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");
    });
  },

到此，这个需求就实现了。

----------------------这是一条华丽的分割线--------------------------------
码字不易，你们的点赞就是我更新的最大动力！