在vue后台管理系统场景下，不同的用户有不同的权限

在用户第一次使用普通管理员账号登录成功之后返回的数据里面有token字段，本地存储token字段

• 如果他返回登录页，使用另外一个超级管理员的账号再次登录，还是会返回token字段，重新设置localStorage存储的token
• 可以看到，浏览器里面的token字段已经更新，但是因为是单页面应用，跳转路由进入首页之后，fetch.js里面封装的http方法获取到的localStorage还是上次的token字段
  原因：单页面应用只有reload，js才会刷新， 页面不刷新js不会重新获取localStorage的值，这个字段就不会更新，所以用户看到的仍然是上次登录的权限界面。为了解决这个问题，有以下2种解决办法：

1. location.href = ‘/home’ 使用location.href跳转页面，可以刷新页面
2. window全局监听localStorage的setItem保存token字段时的事件
   重构setItem，在setItem里面修改localStorage值时，派发一个事件，window全局监听，值发生改变就立即触发监听函数，改变对象的值
   tools.js里面封装dispatchEventStroage函数并抛出
   function dispatchEventStroage () {
   const signSetItem = localStorage.setItem
   // 重构setItem
   localStorage.setItem = function (key, newValue) {
   // 实例化自定义事件
   let setEvent = new Event(‘setItemEvent’)
   // 设置key值和value
   setEvent.key = key
   setEvent.newValue = newValue
   // 当setItem加小括号调用执行时，dispatchEvent触发window全局的setItemEvent事件执行
   window.dispatchEvent(setEvent)
   signSetItem.apply(this, arguments)
   }
   }
   // main.js引入toos.js文件，调用执行
   tool.dispatchEventStroage()
   // fetch.js里面封装的http请求数据方法
   // 为了安全和权限验证，使用JWT技术，每次请求都需要携带token字段
   const reqHeaders = {
   Accept: ‘text/json’,
   token: localStorage.getItem(‘token’) || ‘’
   }
   window.addEventListener(‘setItemEvent’, function(e) {
   reqHeaders.token = e.newValue
   })