vue 按鈕 權(quán)限控制
前言
在日常項目中帝美，會碰到需要根據(jù)后臺接口返回的數(shù)據(jù)，來判斷當前用戶的操作權(quán)限悼潭。必須當有刪除權(quán)限時舰褪，就顯示刪除按鈕。沒有這個權(quán)限時占拍，就不顯示或者刪除這個按鈕。通過查找資料表牢，通過vuex來實現(xiàn)這個功能。
步驟
1.定義buttom權(quán)限
在state中創(chuàng)建buttomPermission彰导，用于保存后臺接口返回的權(quán)限數(shù)據(jù)敲茄。
setPermission用于接受數(shù)據(jù)，將頁面權(quán)限管理傳入到buttomPermission對象中掏父。
使用vuex
Vue.use(Vuex)
創(chuàng)建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.創(chuàng)建permission指令
新建directives文件夾赊淑，創(chuàng)建permission.js文件鸟款。
這里使用inserted函數(shù)，在被綁定元素插入父節(jié)點時檢測該元素是否有權(quán)限组哩。
inserted( el, bindings, vnode ) { }
4.使用permission指令
在按鈕頁面引入和定義 permission指令处渣，并且在buttom中寫入指令，綁定指令中相對于的值黍衙。
<button v-permission="'add'">添加</button>
import permission from './directives/permission'
directives: {permission,},
5.刪除無權(quán)限數(shù)據(jù)
在permission指令,通過bindings獲取該按鈕綁定的value值荠诬，然后在buttomPermission對象中找到，然后判斷是否有權(quán)限方椎，如果沒有權(quán)限钧嘶，則刪除該節(jié)點。
inserted(el, bindings, vnode) {
let btnPermissionValue = bindings.value;
let boolean =vnode.context.$store.state.buttomPermission[btnPermissionValue];
!boolean && el.parentNode.removeChild(el);
}
6.傳入狀態(tài)管理數(shù)據(jù)
將狀態(tài)管理數(shù)據(jù)闸拿，通過setPermission方法傳入到權(quán)限管理中
let permissions = {}
this.$store.commit("setPermission", permissions);
概況
總的來說，就是通過vuex定義一個buttomPermission權(quán)限狀態(tài)對象揽趾，然后再創(chuàng)建一個permissions指令迟隅，通過對每個buttom按鈕使用permissions指令励七，并且綁定該按鈕特定意義的值。然后在permission.js文件中吼野，獲取當前value值两波，從buttomPermission中得到當前按鈕是否有權(quán)限腰奋，沒有則直接刪除掉當前按鈕節(jié)點。
