同一个浏览器登录不同账号,感觉没什么问题,但是会有可能出现大问题,第二个登录的会把第一个登录的token覆盖掉,导致第二个登录用户会操作第一个登录者的某些数据,这里介绍一个解决办法。

1、登录窗口登录了A账户,再复制相同的url,登录B账户

针对简单的A登录,然后换B登录,只要登陆了就可以去任意跳转,简单处理,直接上代码 main.js

outer.beforeEach((to,from,next) => { //这里是在所有路由跳转之前都会去执行以下操作
  if(to.path == '/'){ //如果要去的是登录页
    next() //随意,爱去哪去哪
  } else { //否则
    if(localStorage.getItem('token')){ //判判断当前浏览器是否有登录用户信息
      next() //有,随意,爱咋咋地
    } else { //否则,
      next({path:'/'}) //去登陆页
    }
  }
})

这里的token是是用户登录系统,后台返回的钥匙token

	localStorage.setItem("token", 1)

这里你会问,为什么存localStorage,而不存sessionStore,我给你解释
localStorage:本地缓存,没有时间限制,将一直缓存在本地。
sessionStorage:会话缓存,即浏览器关闭的时候清除缓存数据。

有个情况要注意,退出的时候要记得清除缓存,不然本地会一直保留

1.设置缓存数据:localStorage.setItem(key,value);
2.获取缓存数据:localStorage.getItem(key);
3.获取全部缓存数据:localStorage.valueOf();
4.获取指定下标的key键值:localStorage.key(N);
5.删除缓存数据:localStorage.removeItem(key) ;
6.清空缓存数据:localStorage.clear();

2、窗口1登录了账号A,并停留在一些预操作的页面,这时登录了账号B

这时登录的账号B会替换掉A的登录token,然后账号A的页面可能会被账号B篡改数据,A的查询可能会查到账号B的数,如果权限不同,页面展示的内容肯定又不一致,这些问题,如何正确的规避呢?

后端处理:所有的登录者在操作数据的时候,校验是不是归属自己名下的数据,不是自己名下的数据,直接报错抛异常。不过查询信息的问题,不能规避,A账号能查询到B账号的信息,这会导致账号信息泄密,方法不能适用,但能规避操作数据。
换个方式。

前端处理,前端要监测浏览器是否又新窗口执行了账号登录,检测浏览器本地存储的东西,但是watch不能监测非vue机制存的数据,localStorage中的数据不能实时被拿到,也不能放到vuex中,vuex在其他账号登录时会被重置,同样也拿不到。

正确的实现: 创建一个新文件,并创建一个全局变量globalToken,让组件去引用,这样,watch就会检测到这个全局变量,要做的事情是,这个全局变量不能被其他窗口覆盖掉,在登录组件login.vue里面引入变脸globalToken,登录成功后进行赋值

//先引入变量
import global from '@/config/common.js'
methods: {
  login () {
    if (this.user == '') {
          this.$message.error('账号不能为空!');  //账号校验
        } else if (this.password == '') {
          this.$message.error('密码不能为空!'); //密码校验
        } else {
          this.setCookie(this.user)    
          this.$post('/api/manage/user/login', {
            userName: this.user,
            passWord: this.password
          }).then(res => {
              localStorage.setItem("token", 1)
              global.token= res.token // 赋值给全局变量
              localStorage.setItem('userId', res.token) //同时把token存到本地localStorage
              this.$router.push({path: '/container'})
            })
            .catch(err => {
              this.$message.error(err.msg)
            })
        }
      }
  }

上面代码,在登录成功后,会哎全局变量中存一份token,然后会在本地localStorage也存一份,
main.js里

import global from '@/config/common.js'    //引入全局变量
window.addEventListener("visibilitychange",function(){ //检测浏览器变化,方法执行
  if (document.hidden == false && global.aaa != localStorage.getItem('userId')) {
    global.token= localStorage.getItem('userId') //当前登录的用户信息与全局存的用户信息不同,覆盖新的用户信息,否则是最初设的值
  }
});

最后,在app.vue里面监听这个全局变量的变化,做到实时刷新界面数据

watch: {
    'global.token' : 'refresh'
  },
methods: {
   refresh () {
  		//现将app.vue下面的 头部组件,菜单组件,内容组件全都刷新出来,做到实时同步
        this.hackReset = false
        this.$nextTick(() => {
          this.hackReset = true
        })
      }
}

此时,第二个窗口B登录,返回第一个A登录的窗口,整个页面会同时刷新所有的页面数据,效果实现了,也达到了自己想要的目的。
完活!!!!

提供思路,自己去解决问题!!也许你会有更好的思路!!!

Logo

前往低代码交流专区

更多推荐