vue按钮怎么实现权限控制
导读:本文共1505字符,通常情况下阅读需要5分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 一、步骤1.定义buttom权限在state中创建buttomPermission,用于保存后台接口返回的权限数据。setPermission用于接受数据,将页面权限管理传入到buttomPermission对象中。使用vuex:Vue.use(Vuex)创建vue实例conststore=newVuex.Store({state:{buttomPer... ...
目录
(为您整理了一些要点),点击可以直达。在state
中创建buttomPermission
,用于保存后台接口返回的权限数据。
setPermission
用于接受数据,将页面权限管理传入到buttomPermission
对象中。
使用vuex:
新建directives
文件夹,创建permission.js
文件。
这里使用inserted
函数,在被绑定元素插入父节点时检测该元素是否有权限。
在按钮页面引入和定义 permission
指令,并且在buttom
中写入指令,绑定指令中相对于的值。
在permission
指令,通过bindings
获取该按钮绑定的value
值,然后在buttomPermission
对象中找到,然后判断是否有权限,如果没有权限,则删除该节点。
将状态管理数据,通过setPermission
方法传入到权限管理中
总的来说,就是通过vuex
定义一个buttomPermission
权限状态对象,然后再创建一个permissions
指令,通过对每个buttom
按钮使用permissions
指令,并且绑定该按钮特定意义的值。然后在permission.js
文件中,获取当前value值,从buttomPermission
中得到当前按钮是否有权限,没有则直接删除掉当前按钮节点。
vue按钮怎么实现权限控制的详细内容,希望对您有所帮助,信息来源于网络。