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();
    };
  },