Vue button permission control

The simplest way to control vUE button permissions is with V-if. For example: V-if =’scope.row. XXX === permission Most practices are to mount judgment commands to Vue instances. In addition to using v – if to determine whether a node rendering, there is a way of operating is el. ParentNode. RemoveChild (el)

“

This article will talk about the implementation of these two ways

First demand

  1. You need to add, delete, modify and check permissions for users
  2. Hide or display the user’s operation buttons in the actual table

start

Vuex storage permissionList

Ps: The traversal here only processes the data returned by the back end

MainJs processing permissionList

carbon

Mount it to the instance

Vue.prototype.$_has = hasPermission

complete

For buttons that use permission controls, simply add a v-if=$_has(‘permission’) to their attributes. It’s all very simple if-else logic. Either write v-if in a separate page, or global handlers.

Thanks for reading, and if you have a better way to do it, feel free to leave it in the comments