vue项目实现关闭浏览器清除用户缓存功能

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

就这么简单就可以啦

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值