快捷導(dǎo)航

vue 按鈕權(quán)限控制介紹

更新時(shí)間：2021年12月23日 11:57:50 作者：toinghub

這篇文章主要介紹了vue 按鈕權(quán)限控制，在日常項(xiàng)目中，會(huì)碰到需要根據(jù)后臺(tái)接口返回的數(shù)據(jù)，來(lái)判斷當(dāng)前用戶的操作權(quán)限，必須當(dāng)有刪除權(quán)限時(shí)，就顯示刪除按鈕，下面我們就來(lái)了解一下具體的解決方法,需要的朋友也可以參考一下

在日常項(xiàng)目中，會(huì)碰到需要根據(jù)后臺(tái)接口返回的數(shù)據(jù)，來(lái)判斷當(dāng)前用戶的操作權(quán)限。必須當(dāng)有刪除權(quán)限時(shí)，就顯示刪除按鈕。沒(méi)有這個(gè)權(quán)限時(shí)，就不顯示或者刪除這個(gè)按鈕。通過(guò)查找資料，通過(guò)vuex來(lái)實(shí)現(xiàn)這個(gè)功能。

一、步驟

1.定義buttom權(quán)限

在state中創(chuàng)建buttomPermission，用于保存后臺(tái)接口返回的權(quán)限數(shù)據(jù)。

setPermission用于接受數(shù)據(jù)，將頁(yè)面權(quán)限管理傳入到buttomPermission對(duì)象中。

使用vuex：

Vue.use(Vuex)

創(chuàng)建vue實(shí)例
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é)點(diǎn)時(shí)檢測(cè)該元素是否有權(quán)限。

inserted( el, bindings, vnode ) { }

4.使用permission指令

在按鈕頁(yè)面引入和定義 permission指令，并且在buttom中寫(xiě)入指令，綁定指令中相對(duì)于的值。

 <button v-permission="'add'">添加</button>
import permission from './directives/permission'
directives: {permission,},

5.刪除無(wú)權(quán)限數(shù)據(jù)

在permission指令,通過(guò)bindings獲取該按鈕綁定的value值，然后在buttomPermission對(duì)象中找到，然后判斷是否有權(quán)限，如果沒(méi)有權(quán)限，則刪除該節(jié)點(diǎn)。

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ù)，通過(guò)setPermission方法傳入到權(quán)限管理中

let permissions = {}
this.$store.commit("setPermission", permissions);

二、概況

總的來(lái)說(shuō)，就是通過(guò)vuex定義一個(gè)buttomPermission權(quán)限狀態(tài)對(duì)象，然后再創(chuàng)建一個(gè)permissions指令，通過(guò)對(duì)每個(gè)buttom按鈕使用permissions指令，并且綁定該按鈕特定意義的值。然后在permission.js文件中，獲取當(dāng)前value值，從buttomPermission中得到當(dāng)前按鈕是否有權(quán)限，沒(méi)有則直接刪除掉當(dāng)前按鈕節(jié)點(diǎn)。

到此這篇關(guān)于vue 按鈕權(quán)限控制介紹的文章就介紹到這了,更多相關(guān)vue 按鈕權(quán)限控制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: