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

问题说明

由于不同角色权限不同，显示的界面也就不同（功能与主题等），同浏览器同时登录不同角色会出现角色互串的问题，以下分析与解决均为同浏览器所在环境

分析

1、登录逻辑

• 用户输入登录信息，点击登录向服务端发起请求，服务端根据前端发送的登录信息返回成功或失败，成功返回token字段与用户角色，token字段为加密字段，表明用户身份信息，并携带过期时间，供前端后续请求接口调用，前端通过判断用户角色展示相应角色权限与主题
• 前端拿到token后存储到本地Storage，并在请求拦截中获取并判断本地token存不存在，存在即证明有身份信息，可以访问用户接口，不存在即证明用户未登录或已失效删除，重新导航到登录页

2、多角色登录

• 首先登录账户A，A账户的tokenA与角色A就会存储到Storage，A账户有权限featureA1、featureA2，主题为featureRed，在App.vue监听，这时重新打开一个页签2，输入同样路由地址，会检测到A账户tokenA存在并跳转到A账户对应的路由，同原有页签1显示相同，如果这个时候退出页签2账户，清除tokenA、角色A，页签1就会存在以下两种情况：
  • 1、页签1浏览器刷新：路由会监听到token不存在跳转到指定路由（登录页面）并给出相关提示
  • 2、页签1浏览器不刷新，直接点击A账户权限路由：会请求服务器数据，请求拦截会判断有没有token，没有会导航到指定路由（登录页面）并给出相关提示
• 如果退出页签2账户，清除tokenA、角色A，并且直接在页签2登录账户B，这时候本地Storage就会存储tokenB与角色B，页签2的权限为featureB1、featureB2，主题为featureBlue，这个时候的页签1就会存在以下两种情况：
  • 1、页签1浏览器刷新：这时组件全面刷新，功能权限组件重新渲染，并重新获取新的tokenB，重新设置功能权限为featureB1、featureB2，App.vue重新获取本地用户角色，更改主题为featureBlue，从而实现了角色的跳转
  • 2、页签1浏览器不刷新，直接点击A账户权限路由：由于Storage现在存储的是账户B的信息，账户A界面就会携带账户B的身份去请求接口，这是很大的错误。所以必须还要有路由权限设置，不同角色设置不同meta属性，如果A账户请求B账户路由，meta会不一样，这样设置导航到配置好的404页面，这显然不是我们想要的结果

解决

方法一

我们在路由拦截判断meta角色属性，如果和获取到的Storage里的角色不匹配，会导航到404页面，但是我们导航到404页面的时候可以携带获取到的当前登录用户角色B参数过去，我们重新设计404页面，通过参数信息提示用户已经登录用户B，点击按钮跳转到用户B的主页，主页勾子函数调用，改变功能界面为featureB1、featureB2，主题为featureBlue

方法二

我们可以通过判断用户身份信息的更新来强制跳转页面：比如观察token，当当前用户的tokenB与之前存储的tokenA不同的时候，强制刷新页面，让路由回到'/'，导航到首页，具体如下：

• 用户登录成功，存储相应token信息到本地
• 在vuex中加token字段用以存储用户信息
• 在App.vue中观察vuex中的token，如果不存在，获取本地Storage的值并赋值给vuex的token，如果存在，拿vuex中的token和Storage中的token比较，如果相同什么都不用做，如果不相同，说明新的登录存在了，获取当前路径信息并去除掉路由部分，赋值给window.location.href，这样就实现了强制刷新跳转到'/'

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