Vue Directive implements page element permission control

Implementation approach

Use Vue custom directive to control whether page elements are displayed.

code

1. Custom instruction

// Permission control directive
Vue.directive('permission', {
  inserted: function(el, binding, vnode) {
    // store.getters. Permission_element All user permissions
    // binding.value 'permission' Specifies the element permission of the directive
    // Check whether the user has the necessary permissions to carry elements. If not, delete the elements
    if(! store.getters.permission_element.includes(binding.value)) { el.parentNode.removeChild(el) } } })Copy the code

2. Add a custom directive to the element where you want to control permissionspermission

<el-button v-permission="'system:user:save'" type="primary" > save </el-button>Copy the code