vue + element ui项目数据、页面、按钮权限

1.数据权限

数据权限跟前端关系不大，只需要调后端接口时将用户名传给后端，由后端判断该用户数据权限并返回相应数据。

2.页面权限

页面权限可以在路由里进行控制。正常路径为src/router/index.js

这里权限接口返回的格式为

ps：此处是按钮权限跟页面权限的数据返回是放一块的(auth_name即页面名或某个页面的按钮名)

[
    {
        "auth_id": 29,
        "auth_name": "测试页面1-测试按钮3",
        "auth_flag": "Y"
    },
    {
        "auth_id": 125,
        "auth_name": "测试页面1",
        "auth_flag": "Y"
    },
    {
        "auth_id": 28,
        "auth_name": "测试页面2-测试按钮1",
        "auth_flag": "Y"
    },
    {
        "auth_id": 40,
        "auth_name": "测试页面3-测试按钮2",
        "auth_flag": "Y"
    }
]

function getRouteData() {
  // 需要登陆后调用权限接口，否则会一直调用，我这里使用userid判断是否登录
  let userid = sessionStorage.getItem('current_user_name')
  if (userid != null) {
    // 将JSON格式的对象解析为js对象，currentUser为一个js对象
    userid = JSON.parse(userid)
  }
  if (userid) {
    queryUserAuth({ userid: userid }).then(response => {
      const obj = {}
      for (const index in response) {
        Vue.set(obj, response[index].auth_name, response[index].auth_flag)
      }
      routeData = Object.assign({}, obj)
      // asyncRoutes为权限路由
      if (routeData !== null) {
        Vue.set(asyncRoutes[0], 'hidden', routeData['page2'] !== 'Y')
        Vue.set(asyncRoutes[1], 'hidden', routeData['page3'] !== 'Y')
      }
      sessionStorage.setItem('current_route_data', JSON.stringify(routeData))
    })
  }
}
getRouteData()

然后通过router的hidden属性在你项目控制页面栏的地方将hidden为true的页面隐藏。如v-if="!item.hidden"。

3.按钮权限

按钮权限的实现可以通过自定义指令。

第一步 编写自定义指令

这边以我的项目中后端返回的数据格式为例

[
    {
        "auth_id": 29,
        "auth_name": "测试页面1-测试按钮3",
        "auth_flag": "Y"
    },
    {
        "auth_id": 125,
        "auth_name": "测试页面1",
        "auth_flag": "Y"
    },
    {
        "auth_id": 28,
        "auth_name": "测试页面2-测试按钮1",
        "auth_flag": "Y"
    },
    {
        "auth_id": 40,
        "auth_name": "测试页面3-测试按钮2",
        "auth_flag": "Y"
    }
]

编写auth.js

export default {
  bind(el, binding, vnode) {
    let routeData = sessionStorage.getItem('current_route_data')
    if (routeData != null) {
      // 将JSON格式的对象解析为js对象，currentUser为一个js对象
      routeData = JSON.parse(routeData)
    }
    // apiMap.menuName为每个页面的名字与接口返回的数据一致 如'测试页面1'
    if (routeData[vnode.context.apiMap.menuName + '-' + el.innerText]) {
      // console.log(routeData[vnode.context.apiMap.menuName + '-' + el.innerText])
      if (routeData[vnode.context.apiMap.menuName + '-' + el.innerText] === 'N') el.style.display = 'none'
    }
  }
}

第二步注册指令

在main.js中注册

import auth from '@/directive/auth'
Vue.directive('auth', auth)

第三步使用指令

在每个按钮上加上v-auth

<div v-auth>按钮</div>