vue实现按钮权限控制

需求

管理端设置页面浏览权限和按钮使用权限，如果用户没有某个按钮的权限，则隐藏该按钮。

实现原理

主要方式是在el-button按钮上设置标签数值，利用vue的指令功能获取按钮实例对象和按钮上绑定的标签数值，与从接口拿到的按钮权限列表进行匹配，如果匹配成功，证明用户拥有该按钮的使用权限，如果发现没有使用权限，则在指令处理函数中编写代码移除该按钮，界面上就看不到该按钮了。

代码

src/directive/permission/hasPermi.js

import store from '@/store'

export default {
// inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  inserted(el, binding, vnode) {
    const { value } = binding
    const all_permission = "*:*:*";
    const permissions = store.getters && store.getters.permissions

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
        // 或者：el.style.display = 'none'
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
}

src/directive/index.js

import hasPermi from './permission/hasPermi'

const install = function(Vue) {
  Vue.directive('hasPermi', hasPermi)
}

if (window.Vue) {
  window['hasPermi'] = hasPermi
  Vue.use(install); // eslint-disable-line
}

export default install

main.js

import Vue from 'vue'
import directive from './directive' // directive
Vue.use(directive)

权限列表参考：