vue同一浏览器登录不同账号token覆盖导致的数据互相污染

业务场景

后台管理系统有不同的角色权限,不同账号的角色权限不同登录之后看到的页面也是不一样的,当我们用同一个浏览器登录一个账号A之后,再打开一个新的tab标签页重新登录一个不同于账号A角色权限的账号B之后,浏览器中A的token被B覆盖,导致A账号提交数据时候可能会出现后台误以为是B账号进行的一些操作,从而导致后台数据保存出现匹配错误的bug

解决方案
一、vue中新建一个全局变量用来保存当前用户token

新建一个constants.js文件

/**
 * 全局变量定义
 */
export let global = {
    "token": ''
}

把token保存到localstorage的同时也保存一份到当前vue的全局变量中

import {global} from '@/utils/constant'
global.token = res.data.token // 赋值给全局变量
二、App.vue中
mounted() {
      document.addEventListener('visibilitychange', this.checkNameExpired);
    },
    beforeDestroy() {
      document.removeEventListener('visibilitychange', this.checkNameExpired);
    },
    methods: {
      checkNameExpired() {
        console.log(global.token)
        if (document.hidden == false && global.token != getToken()) {
          global.token= getToken() //当前登录的用户信息与全局存的用户信息不同,覆盖新的用户信息,否则是最初设的值
          // 这里样式可以根据项目优化,刷新页面
          window.location.reload();
        }
      }
    }

这样子就可以实现直接同一浏览器不同tab标签页登录不同账号时候避免数据的相互污染干扰了,说白了就是一个浏览器同时只能允许一个账号的在线。

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值