Vue directive 实现页面元素权限控制

实现思路

使用 Vue 自定义指令（directive） 控制页面元素是否显示.

代码

1. 自定义指令

// 权限控制指令
Vue.directive('permission', {
  inserted: function(el, binding, vnode) {
    // store.getters.permission_element 用户所有权限
    // binding.value  `permission`指令所带的元素权限
    // 用户所有权限是否有携带元素需要的权限, 没有则删除改元素
    if (!store.getters.permission_element.includes(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

2. 在需要控制权限的元素添加自定义指令permission

<el-button v-permission="'system:user:save'" type="primary" >保存</el-button>