如何判断关闭浏览器事件？

Question

使用vue3项目，我想关闭浏览器或者关闭浏览器的标签页清除token，该怎么操作

Answer 1

let isEndSendOK = false;
function report() {
  if (isEndSendOK) {
    return;
  }
  isEndSendOK = true;
}

// 监听多个事件，做同一个事情，用一个标志位确定是否做过
// 移动端普遍只支持 pagehide
window.addEventListener('beforeunload', report);
window.addEventListener('pagehide', report);
window.addEventListener('unload', report);

// IOS14 之前不会冒泡，只能监听document
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState !== 'visible') {
    report();
  } else {
    // 如果界面又显示了，说明没有关闭，重置标志位
    isEndSendOK = false;
  }
});

function report () {
    //TODO 关闭浏览器
}

Answer 2

组件里在卸载之前处理一下,其实token如果放sessionStorage的话每次关闭浏览器或者关闭浏览器的标签页就会自动清除了,保险起见你可以再监听事件(放其他地方同理，清除掉即可):

sessionStorage.setItem('token', token);

export default {
  mounted() {
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  },
  beforeUnmount() {
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  },
  methods: {
    handleBeforeUnload(event) {
     sessionStorage.removeItem('token');
    },
  },
};