Implementation approach
Use Vue custom directive to control whether page elements are displayed.
code
- 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
- Add a custom directive to the element where you want to control permissions
permission
<el-button v-permission="'system:user:save'" type="primary" > save </el-button>Copy the code