vue 按钮 权限管制
前言
在日常我的项目中,会碰到须要依据后盾接口返回的数据,来判断以后用户的操作权限。必须当有删除权限时,就显示删除按钮。没有这个权限时,就不显示或者删除这个按钮。通过查找材料,通过 vuex 来实现这个性能。
步骤
1. 定义 buttom 权限
在 state
中创立buttomPermission
,用于保留后盾接口返回的权限数据。
setPermission
用于承受数据,将页面权限治理传入到 buttomPermission
对象中。
应用 vuex
Vue.use(Vuex)
创立 vue 实例
const store = new Vuex.Store({
state: {buttomPermission: {}
},
mutations: {setPermission(state, permission) {state.buttomPermission = permission}
}
})
export default store
2. 定义 store
import store from './store/index.js'
new Vue({
store,
el: '#app',
render: h => h(App)
})
3. 创立 permission
指令
新建 directives
文件夹,创立 permission.js
文件。
这里应用 inserted
函数,在被绑定元素插入父节点时检测该元素是否有权限。
inserted(el, bindings, vnode) {}
4. 应用 permission
指令
在按钮页面引入和定义 permission 指令,并且在 buttom 中写入指令,绑定指令中绝对于的值。
<button v-permission="'add'"> 增加 </button>
import permission from './directives/permission'
directives: {permission,},
5. 删除无权限数据
在 permission
指令, 通过 bindings
获取该按钮绑定的 value 值,而后在 buttomPermission
对象中找到,而后判断是否有权限,如果没有权限,则删除该节点。
inserted(el, bindings, vnode) {
let btnPermissionValue = bindings.value;
let boolean =vnode.context.$store.state.buttomPermission[btnPermissionValue];
!boolean && el.parentNode.removeChild(el);
}
6. 传入状态治理数据
将状态治理数据,通过 setPermission
办法传入到权限治理中
let permissions = {}
this.$store.commit("setPermission", permissions);
详情
总的来说,就是通过 vuex
定义一个 buttomPermission
权限状态对象,而后再创立一个 permissions
指令,通过对每个 buttom
按钮应用 permissions
指令,并且绑定该按钮特定意义的值。而后在 permission.js
文件中,获取以后 value
值,从 buttomPermission
中失去以后按钮是否有权限,没有则间接删除掉以后按钮节点。