管理员可新打开下级用户权限的页面，并且管理员的页面和新打开用户的页面之间，权限互不干扰的小功能。

前段时间做了一个管理系统的页面，要求最高权限的账号，可以新打开下级权限的页面。
如图1，管理员打开自己页面的权限，也可以打开下级权限用户的页面，如图2。图1和图1同一个用户2种权限，可以在一个浏览器里打开。

图1.png

图2.png

要求：

原来的页面权限为管理员的权限页面和请求内容。
新打开的页面为下级权限的页面和请求内容（包括跳转到指定的页面）。
解决方法：这就相当于有2个用户权限的页面了，但是考虑到一个浏览器只能登录一个用户，目前只能想到利用路径参数来解决，这个步骤一共4步。
分别为：
步骤一：传参数
步骤二：存参数
步骤三：后台请求中用参数
步骤四：跳转的页面用参数

步骤一：
传参数。
如下图3所示，跳转时新打开一个页面，带路径参数uid（用户id）和dataUrl（新打开的目标页面）

图3.png

代码为：

goToHomePage(row) {
      //TODO 这里的uid可能为后台数据给的userId
      //上线的测试
      let uid = row.user_id
      let dataUrl = 'modules/t-lodge/index.html/#/room-device'
      // let url = `${window.parent.location.href.split('?')[0]}?uid=${uid}&dataUrl=${dataUrl}`
      let url = `${location.href.split('?')[0]}?uid=${uid}&dataUrl=/room-device/#/room-device`
      window.open(url)
      // 本地测试
      // let locationUrlPre = location.href.split('#')[0]
      // window.open(`${locationUrlPre}?uid=${uid}#/room-device`)
    },

步骤二：
存参数。
如图4，根据路径参数把uid和daraUrl存储在store里面【store比http先加载】

图4.png

代码为：

let myUid = ''
let dataUrl = ''
if (location.search) {
  function handleUrl(str) {
    let obj = {}
    let arr = str.split('&')
    arr.map((item) => {
      let itemArr = item.split('=')
      obj[itemArr[0]] = itemArr[1]
    })
    return obj
  }
  // let searchObj = new URLSearchParams(location.search.substring(1, location.search.length - 1))
  // myUid = searchObj.get('uid') || ''
  // dataUrl = searchObj.get('dataUrl') || ''
  //兼容IE（URLSearchParams不兼容IE）
  let searchObj = handleUrl(location.search.substring(1, location.search.length - 1))
  myUid = searchObj.uid || ''
  dataUrl = searchObj.dataUrl || ''
}
//store里的参数
state: {
    uid: myUid,
    dataUrl: dataUrl,
    screenWidth: document.documentElement.clientWidth, //屏幕宽度
  }

步骤三：
后台请求中用参数。
如图5，如果store里面存在uid，则设置headers里面设置添加user_id，没有uid则不设置（这里的headers是axios请求共用的，设置一次就行），登录后每个请求都带有cookie，如图6，后台根据user_id判断用户的请求，如果有user_id则请求user_id用户的数据，没有user_id则请求登录cookie用户的数据。

图5.png

代码为：

axios.interceptors.request.use(config => {
  if (store.state.uid) {
    config.headers.user_id = store.state.uid
  }
  return config
}, err => {
  return Promise.reject(err)
})

图6.png

步骤四：
跳转的页面用参数。
如图7所示，请求完菜单列表后，根据store里的dataUrl是否存在，判断是否进入目标页面dataUrl。

图7.png

代码为：

this.$api.getMenuInfo()
        .then(res => {
          if (res.data.code === 0) {
            //登录成功 跳转页面 //TODO
            this.handleMenuList(res.data.menuList)
            let uid = this.$store.state.uid
            if (uid) { //主页跳转进来的，有uid同时必须有dataUrl
              this.goToThisPage(this.$store.state.dataUrl)
            } //直接登录进来的
            else {
              this.goToThisPage('/')
            }
          }
          else {
            this.$message.error(res.data.msg)
          }
        })

上面代码中的getMenuInfo为请求，handleMenuList，goToThisPage为自己定义的跳转页面的方法。
问题：跳转的页面，每次刷新都会跳转到路径参数指定的页面，因为指定页面和用户id是一起的，不能删除

最后编辑于：2019.10.23 16:04:41