vue项目中实现同一个浏览器登录多个用户账号

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_35958891/article/details/102588210

需求

同一个浏览器两个tab分别登录A和B两个账号

问题描述

用户登录会在缓存中存token，键名都是一样的，所以会出现A用户登录，后在另外一个tab里登录B用户，A用户再访问接口的时候，其实是用的B用户的token，因为每个用户的权限不一样，这样就照成了bug

解决思路

让不同的用户存储的token的键名不一样

实现方法

• 在登录的时候存储用TOKEN+userName作为键来存储token

import Cookies from 'js-cookie'
import Config from '@/config'
const TokenKey = Config.TokenKey;

export function getToken() {
  return Cookies.get( TokenKey + sessionStorage.getItem( 'username' ) )
}

export function setToken( token, rememberMe, username ) {
  if ( rememberMe ) {
    return Cookies.set( TokenKey + username, token, { expires: Config.tokenCookieExpires } )
  } else {
    return Cookies.set( TokenKey + username, token )
  }
}

export function removeToken( username ) {
  return Cookies.remove( TokenKey + username )
}

• 页面刷新前存储用户名

    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("username", this.user.username || "");
    });

最简单的实现方式

不用cookie改用localStorage和sessionStorage来实现就可以了，因为缓存存储和cookie的存储工作方式是不一样的。
存储在sessionStorage中的数据在页面会话结束时被清除…在新选项卡或窗口中打开一个页面将启动一个新会话，这与会话cookie的工作方式不同。