vue按鈕怎么實現權限控制

這篇文章主要講解了“vue按鈕怎么實現權限控制”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue按鈕怎么實現權限控制”吧！

一、步驟

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按鈕怎么實現權限控制這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！