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
中得到當前按鈕是否有權限,沒有則直接刪除掉當前按鈕節點。
到此這篇關於vue 按鈕 權限控制介紹的文章就介紹到這瞭,更多相關vue 按鈕 權限控制內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!