目錄

• 一、步驟
• 1.定義buttom許可權
  
• 2.定義store
  
• 3.建立permission指令
  
• 4.使用permission指令
  
• 5.刪除無許可權資料
  
• 6.傳入狀態管理資料
  
• 二、概況

前言：

在日常專案中，會碰到需要根據後臺介面返回的資料，來判斷當前使用者的操作許可權。http://www.cppcns.com必須當有刪除許可權時，就顯示刪除按鈕。沒有這個許可權時，就不顯示或者刪bBOzb除這個按鈕。通過查詢資料，通過x來實現這個功能。

一、步驟

1.定義buttom許可權

在state中建立buttomPermission，用於儲存後臺介面返回的許可權資料。

setPermission用於接受資料，將頁http://www.cppcns.com

使用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.'

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,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 按鈕 許可權控制內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！