博客

最近项目要实现关闭浏览器清除用户缓存的功能，在网上找了很久大部分都是使用

window.onbeforeunload

这个监听函数来做处理的，但是这个监听函数最大的问题就是浏览器刷新和关闭都会触发这个监听的事件，不符合我的需求。于是一开始的思路一直在寻找如何区分刷新和关闭的，但是找了很多方法有的不太靠谱，有的没有效果

下面这种我试了下，倒是也能实现，但是这个间隔的时间这谁说的准呢，不同的浏览器可能时间间隔都不一样，总之感觉不太靠谱

    const that = this;
    const is_fireFox = navigator.userAgent.indexOf('Firefox') > -1; //是否是火狐浏览器
    window.onbeforeunload = function () {
      // 刷新或关闭页面都会执行，且先于onunload执行
      that._beforeUnload_time = new Date().getTime();
      if (is_fireFox) {
        sessionStorage.removeItem('access_token');
      }
    };
    window.onunload = function () {
      that._gap_time = new Date().getTime() - that._beforeUnload_time;
      if (that._gap_time <= 2) {
        // 浏览器关闭
        sessionStorage.removeItem('access_token');
      } else {
        // 浏览器刷新
      }
    };

后面，我同事给我提供了另外一种思路。利用cookie缓存如果没有设置时间关闭浏览器缓存会被自动清除的特性，方法如下

我的项目是在登录成功的时候存用户缓存的，于是我也在登录成功的时候存入一个cookies变量，根据是否存在这个变量在请求的时候是否清除token

import Cookies from 'js-cookie';
// 登录成功的代码函数里面
Cookies.set('CLOSEBROWSERFLAG', 'closeBrowserFlag');

// 在给项目中给请求authorization赋值的地方
const closeBrowserFlag = Cookies.get('CLOSEBROWSERFLAG')

const authorization = { accessToken: closeBrowserFlag && localStorage.getItem('access_token') ? localStorage.getItem('access_token') : '' };

就这么简单就可以啦