vue按钮权限控制

vue按钮权限控制前言日常项目中，需要根据后台接口返回的数据判断当前用户的操作权限。有删除权限时必须显示删除按钮。没有这个权限，这个按钮将不会被显示或删除。这个功能是通过vuex通过查找资料实现的。Step1.定义buttom权限在state中创建一个buttomPermission，用于保存后台接口返回的权限数据。setPermission用于接受数据并将页面权限管理传递给buttomPermission对象。使用vuexVue.use(Vuex)创建一个vue实例conststore=newVuex.Store({state:{buttomPermission:{}},mutations:{setPermission(state,permission){state.buttomPermission=permission}}})exportdefaultstore2.Definestoreimportstorefrom'./store/index.js'newVue({store,el:'#app',render:h=>h(App)})3.新建一个权限命令新建一个directives文件夹并创建权限.js文件。这里使用inserted函数来检测绑定元素插入到父节点时元素是否有权限。插入（EL，绑定，vnode）{}4。使用权限指令在按钮页面引入并定义权限指令，并将指令写在按钮中，绑定指令相关的值。Addimportpermissionfrom'./directives/permission'directives:{permission,},5.删除权限指令中未授权的数据，通过获取按钮绑定bindings在buttomPermission对象中找到指定的值，然后判断是否有权限。如果没有权限，则删除该节点。inserted(el,bindings,vnode){让btnPermissionValue=bindings.value;让布尔=vnode.context.$store.state.buttomPermission[btnPermissionValue];!boolean&&el.parentNode.removeChild(el);}6.传入状态管理数据通过setPermission方法将状态管理数据传入权限管理letpermissions={}this.$store.commit("setPermission",permissions);概述总的来说就是通过vuex对象定义一个buttomPermission权限状态，然后创建权限命令，通过对每个按钮使用权限命令，绑定按钮具体含义的值。然后在permission.js文件中获取当前值，从buttomPermission中获取当前按钮是否有权限，如果没有则直接删除当前按钮节点。