vue后台管理系统在同一浏览器登录不同权限角色cookie被覆盖刷新页面问题(简单有效!!!)

场景:

在同一浏览器,登录同一个系统,打开两个标签页,登录不同角色权限的账号,会出现先登录的cookie会被后来登录的cookie给覆盖掉。

从而导致,原来打开的页面就会带着新的token信息去请求后台,但页面显示的还是之前权限角色范围内的信息,这样是有问题的,按道理,原来的页面应该变成后面登录角色的权限范围内应该展示的页面及内容。

解决方案:

一开始,我在网上看了很多文章,但是,大多数说的都过于复杂且改动过于麻烦,有的问题都不对应,所以,最后我只能自己想办法了。下面是我的解决方案,直接上代码:

  created() {
    document.addEventListener("visibilitychange", function () {
      if (store.getters.token != getToken()) {
        location.reload();
      }
    });
  },

就简单的几行代码就可以解决掉这个问题了,这段代码我写到了App.vue文件里。主要用到 visibilitychange 事件监听,当点击切换标签页时会触发。此时,用本地的cookie里的token和vuex的store里的token进行比较,如果不一样,则进行刷新页面操作。这样就可以成功解决掉这个问题了,简单又实用。

注意: getToken()是我自己封装的读取cookie的方法。这个不一定要和我这写的一样,思路一样就行。

如果觉得对你有帮助~可以点个赞,鼓励鼓励作者哟!

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值