最近项目要实现关闭浏览器清除用户缓存的功能,在网上找了很久大部分都是使用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') : '' };

就这么简单就可以啦

GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐