Vue利用自定義指令實(shí)現(xiàn)按鈕權(quán)限控制
背景
目前系統(tǒng)里面有一些頁(yè)面需要根據(jù)用戶(hù)的角色不同，顯示不同的按鈕，如果用戶(hù)分配了該按鈕權(quán)限就展示，否則沒(méi)有分配權(quán)限的按鈕就不展示。
實(shí)現(xiàn)原理
在 el-button 按鈕上設(shè)置標(biāo)簽數(shù)值，利用 vue 的指令功能獲取按鈕實(shí)例對(duì)象和按鈕上綁定的標(biāo)簽數(shù)值，與從接口拿到的按鈕權(quán)限數(shù)據(jù)進(jìn)行匹配，如果匹配成功，證明用戶(hù)擁有該按鈕的使用權(quán)限，如果發(fā)現(xiàn)沒(méi)有使用權(quán)限，則在指令處理函數(shù)中編寫(xiě)代碼移除該按鈕，界面上就看不到該按鈕了。
實(shí)現(xiàn)代碼
指令實(shí)現(xiàn)：src/directive/hasPermission.js
import store from '@/store'
export default {
hasPermission: {
// inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。
inserted(el, binding, vnode) {
const { value } = binding
const all_permission = "*:*:*";
const permissions = store.getters && store.getters.permissions
if (value && value instanceof Array && value.length > 0) {
const permissionFlag = value
const hasPermissions = permissions.some(permission => {
return all_permission === permission || permissionFlag.includes(permission)
})
if (!hasPermissions) {
el.parentNode && el.parentNode.removeChild(el)
// 或者：el.style.display = 'none'
}
} else {
throw new Error(`請(qǐng)?jiān)O(shè)置操作權(quán)限標(biāo)簽值`)
}
}
}
}指令注冊(cè)：main.js
// 多個(gè)指令的使用
Vue.use((vue) => {
((requireContext) => {
const arr = requireContext.keys().map(requireContext)
; (arr || []).forEach((directive) => {
directive = directive.__esModule && directive.default ? directive.default : directive
Object.keys(directive).forEach((key) => {
vue.directive(key, directive[key])
})
})
})(require.context('./directives', false, /^\.\/.*\.js$/))
})頁(yè)面使用
在具體的頁(yè)面，按鈕中只需引用v-has-permission指令，賦值判斷即可：
<el-button type="primary" v-has-permission="'page1:add'">新增</el-button>
到此這篇關(guān)于Vue利用自定義指令實(shí)現(xiàn)按鈕權(quán)限控制的文章就介紹到這了,更多相關(guān)Vue按鈕權(quán)限控制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3中的script?setup語(yǔ)法糖的使用及說(shuō)明
在這篇博客中,我們將探討?script?setup?的含義、好處以及示例代碼,幫助你更好地理解并在項(xiàng)目中合理運(yùn)用這一特性,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
在Vue3中使用provide和inject進(jìn)行依賴(lài)注入的代碼詳解
在現(xiàn)代前端開(kāi)發(fā)中,Vue.js已經(jīng)成為了非常流行的框架之一,它提供了極大的靈活性和可維護(hù)性,今天我們要探討的是Vue?3中的provide和inject功能,這是一種用于在組件樹(shù)中進(jìn)行依賴(lài)注入的方法,需要的朋友可以參考下2024-06-06
使用vue3.2實(shí)現(xiàn)多頁(yè)簽導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了如何使用vue3.2 + elementPlus + pinia 實(shí)現(xiàn)多頁(yè)簽導(dǎo)航,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2023-12-12
Vue.js列表渲染綁定jQuery插件的正確姿勢(shì)
這篇文章主要為大家詳細(xì)介紹了Vue.js列表渲染綁定jQuery插件的正確姿勢(shì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
el-date-picker如何篩選時(shí)間日期選擇范圍
這篇文章主要介紹了el-date-picker篩選時(shí)間日期選擇范圍,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-12-12
這篇文章主要介紹了關(guān)于vue3中setup函數(shù)的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
<Teleport> 是 Vue 3 的一個(gè)內(nèi)置組件,允許將組件的內(nèi)容渲染到 DOM 中的任意位置,而不改變其邏輯結(jié)構(gòu),這篇文章主要介紹了Vue 3 的＜Teleport＞功能與用法詳解,需要的朋友可以參考下2025-04-04
vue中watch和computed為什么能監(jiān)聽(tīng)到數(shù)據(jù)的改變以及不同之處
這篇文章主要介紹了vue中watch和computed為什么能監(jiān)聽(tīng)到數(shù)據(jù)的改變以及不同之處,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
vue實(shí)現(xiàn)錄音并轉(zhuǎn)文字功能包括PC端web手機(jī)端web(實(shí)現(xiàn)過(guò)程)
vue實(shí)現(xiàn)錄音并轉(zhuǎn)文字功能,包括PC端,手機(jī)端和企業(yè)微信自建應(yīng)用端,本文通過(guò)實(shí)例代碼介紹vue實(shí)現(xiàn)錄音并轉(zhuǎn)文字功能包括PC端web手機(jī)端web,感興趣的朋友跟隨小編一起看看吧2024-08-08
vue設(shè)計(jì)與實(shí)現(xiàn)合理的觸發(fā)響應(yīng)
這篇文章主要為大家介紹了vue設(shè)計(jì)與實(shí)現(xiàn)合理的觸發(fā)響應(yīng)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08