版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
需求
同一个浏览器两个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的工作方式不同。