前端多角色权限页面（同浏览器同时登录）数据互串解决

项目是使用vue3写的

问题说明

现在的问题是，在同个浏览器打开两个标签页（都是登录页面），A标签页先登录A的账号，然后B标签页登录B账号。我的登录信息（userInfo和token、权限等都是存放在localStorage中的）但是因为是同一个系统，相同的域名，所以这两个标签页公用一个本地缓存地址。

这就造成了B的账号在登陆之后会覆盖掉A账号之前缓存的数据。

然后回到A标签页对A账号进行操作，调用接口时，我的token是用的本地缓存的Token，这就造成了，A的请求是用的B的Token，这绝对是有问题的。

还有的就是A、B两个账号的权限是不同的。也会出现问题。可能会重定向到404页面。

解决方法：

参考了一篇文章，那文章收费-靠。

我具体的解决办法是：将token缓存到本地缓存和vuex中，我在接口请求的时候在前置守卫中比较vuex中的token和本地缓存的Token，如果这两个token相同，那么什么都不处理正常发送请求。如果两个不相等，那么就强制刷新页面，并且为了解决B账号没有这个页面的权限问题，直接重定向到根目录'/'。

注：至于为什么采用在接口请求中比较，主要是考虑到这个方法直接且简单，即使你进行路由跳转，也会触发接口的请求，也会走这个判断。

还有一点我测试使用了三种方法进行重定向和刷新页面，最后发现还是window.location.href = '/';这个好用，其他几个方法多多少少都会出现问题。

window.location.reload();会在你没有当前页面权限的时候跳转到404或者没有权限的页面。

useRouter().push('/');---也就是router.push('/');好像会报找不到对应vue-roter的错误。

import { useRouter } from 'vue-router';request.interceptors.request.use(config => {const userStore = useUserStore();// 获取当前标签页的 Token（从 Vuex 中）const vuexToken = userStore?.webToken;// 获取本地缓存的 Token（从 localStorage 中）const localStorageToken = storage.get('KTUserStorage')?.webToken;// console.log('vuex中的token', vuexToken);// console.log('本地缓存中的token', localStorageToken);// 检查 Token 是否一致if (vuexToken && localStorageToken) {if (vuexToken !== localStorageToken) {// Token 不一致，说明其他标签页已经登录了新的账号// 阻止当前请求，并强制刷新页面message.error('Token 不一致，页面已刷新');// window.location.reload();// useRouter().push('/');window.location.href = '/';return false;// return Promise.reject(new Error('Token 不一致，页面已刷新'));}}}, error => {// 请求错误throw new Error(error);
});

实际情况可能会遇到各种各样的问题，通过思考可能会有很多种方法，如果大家有什么好的方法或者指正，欢迎交流