按钮级权限控制方案-自定义指令v-auth

2018-08-31

通过自定义指令控制页面里面部分内容的权限

为什么采用自定义指令v-auth？

一、原因：

按钮级权限控制通常不仅仅指按钮的显示与否也涵盖某些html内容的隐藏与否
自定义指令可以绑定到标签元素上，可以有效实现该标签元素与其子元素的显示隐藏

二、需求：

每个权限都需要满足；
部分权限需要满足

三、实现代码：

import store from '@/store'

/*
* v-auth 自定义权限按钮指令
* v-auth:every 每个权限都需要满足
* v-auth:some 部分权限需要满足
*/

const auth = (el, binding) => {
  let valueArr = binding.value
  let authorities = store.getters.authorities
  let rules = true
  let arg = binding.arg || 'every'
  if (arg === 'every') {
    rules = valueArr.every(item => {
      return authorities.includes(item)
    })
  } else if (arg === 'some') {
    rules = valueArr.some(item => {
      return authorities.includes(item)
    })
  }
  !rules && el.parentNode.removeChild(el)
}

export default auth

四、自定义指令v-auth的引入：

1、directive目录下index.js引入auth.js，并设置自定义指令

import auth from './auth'

export default (Vue) => {
  Vue.directive('auth', {
    inserted: auth
  })
}

2、main.js里引入自定义指令

1 2	import Directive from './directive' Vue.use(Directive)

五、自定义指令v-auth的使用：

1
2
3

el-button(v-auth="['user']") 普通用法显示
el-button(v-auth:every="['user', 'role']") 每个权限都满足显示
el-button(v-auth:some="['user', 'role']") 部分权限满足显示