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

问题说明

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

分析

1、登录逻辑

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

2、多角色登录

• 首先登录账户A，A账户的tokenA与角色A就会存储到Storage，A账户有权限featureA1、featureA2，主题为featureRed，在App.vue监听，这时重新打开一个页签2，输入同样路由地址，会检测到A账户tokenA存在并跳转到A账户对应的路由，同原有页签1显示相同，如果这个时候退出页签2账户