vue通过自定义指令实现按钮权限控制

背景：

目前系统里面有一些页面需要根据用户的角色不同，显示不同的按钮，如果用户分配了该按钮权限就展示，否则没有分配权限的按钮就不展示。

实现原理

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

实现代码

指令实现：src/directive/hasPermission.js

import store from '@/store'

export default {
 hasPermission: {
// 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(`请设置操作权限标签值`)
    }
  }
 }
}

指令注册：main.js

// 多个指令的使用
Vue.use((vue) => {
  ((requireContext) => {
    const arr = requireContext.keys().map(requireContext)
      ; (arr || []).forEach((directive) => {
        directive = directive.__esModule && directive.default ? directive.default : directive
        Object.keys(directive).forEach((key) => {
          vue.directive(key, directive[key])
        })
      })
  })(require.context('./directives', false, /^./.*.js$/))
})

页面使用
在具体的页面，按钮中只需引用v-has-permission指令，赋值判断即可：

新增

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 技术同学必会的 MySQL 设计规约，都是惨痛的教训

在我们对数据库技术方案设计的时候，我们是否有自己的设计理念或者原则，还是更多的依据自己的直觉去设计，是否曾经懊悔线上发生过的一次低级故障，可能稍微注意点就可以避免，是否想过怎么才能很好的避免，下面规范的价值正是我们工作的检查清单，需要我们不断从错误中积累有效经…