vue 关闭浏览器清空token (区分刷新)

知识点

浏览器关闭执行的是 beforeunload , unload 这两个事件;
而浏览器刷新执行的是beforeunload, unload, load 三个事件;

思路

虽然刷新与关闭都会走onbeforeunload与onunload,但可能因为刷新在加载新页面前内部机制还需要做一些准备工作,所以刷新事件在执行到onunload事件时,用的时间会比关闭事件时间长。

所以,通过时间差来判断浏览器是刷新还是关闭,浏览器执行beforeunload的时候给一个开始时间,执行unload的时候给一个结束时间;判断一下时间差;我设置的是5毫秒来区分浏览器的关闭和刷新,具体的时间最好还是亲自测一下;

mounted() {
    let beginTime = 0; //开始时间
    let differTime = 0; //时间差
    window.onunload = function () {
      differTime = new Date().getTime() - beginTime;
      if (differTime <= 5) {
        console.log("这是关闭");
        localStorage.setItem("token", "");
        //退出登录跳到首页
        this.$router.push({ path: "/" });
      } else {
        console.log("这是刷新");
      }
    };

    window.onbeforeunload = function () {
      beginTime = new Date().getTime();
    };
  },

猜你喜欢

转载自blog.csdn.net/huhuhuja/article/details/111475264