If you don’t understand, come hammer me_vue RBAC permission management_button level permission management_custom command_setting process

Button-level permission management is much simpler. Simply put, it is the button function at the bottom of the page to control whether to display.

1. For example, I have set the employee role for an account, and I have set the following permissions for the employee role. You can see that there is no secondary button-level permission

2. Then I log in to this account, and the roles/points returned by the backend are an empty array

The array returned by points is the button permission of the employee role. This value should be agreed with the backend as the value of the button permission information. For example, I agree here as the permission ID instead of the permission name.

3. Then use the global custom command to control, the useInfo here has been submitted to the vuex by the routing guard, and the vuex actions update the userInfo of the state through mutation, so it can be accessed across components.

Vue.directive('buttonPerm', {
      inserted(el, binding) {
        console.log(store.state.user.userInfo.roles.points)
        console.log(el, binding, 9999)
        const points = store.state.user.userInfo.roles.points
        points.includes(binding.value) ? true : el.parentNode.removeChild(el)
      }
})

4. Then add v-buttonPerm="'export-excel'" to the function points that need to be controlled

export-excel is not set arbitrarily and needs to be set as the permission field agreed with the backend

export-excel will be passed into the binding.value property of the inserted hook

Then we judge whether the points includes binding.value => does not exist, and then use the el.parentNode.removeChild(el) of the inserted hook to kill the button itself to achieve the purpose of controlling the display

Test again: I add this permission to this account

Summarize

After setting the permission point information, the backend will return the role permission array of each employee. There is a button-level permission array in the permission array. Using the name in this array, we can use custom instructions to add to the button that requires permission management.

v-custom command name="'button-level permission ID'"

The custom instruction will be executed once when the component is rendered, return to the binding.value of the custom instruction , and then get the button permission array points through vuex, and then display or destroy the button through judgment => el.parentNode.removeChild( el )