Vue利用自定義指令實現(xiàn)按鈕權(quán)限控制
背景
目前系統(tǒng)里面有一些頁面需要根據(jù)用戶的角色不同,顯示不同的按鈕,如果用戶分配了該按鈕權(quán)限就展示,否則沒有分配權(quán)限的按鈕就不展示。
實現(xiàn)原理
在 el-button 按鈕上設(shè)置標(biāo)簽數(shù)值,利用 vue 的指令功能獲取按鈕實例對象和按鈕上綁定的標(biāo)簽數(shù)值,與從接口拿到的按鈕權(quán)限數(shù)據(jù)進(jìn)行匹配,如果匹配成功,證明用戶擁有該按鈕的使用權(quán)限,如果發(fā)現(xiàn)沒有使用權(quán)限,則在指令處理函數(shù)中編寫代碼移除該按鈕,界面上就看不到該按鈕了。
實現(xiàn)代碼
指令實現(xiàn):src/directive/hasPermission.js
import store from '@/store'
export default {
hasPermission: {
// inserted:被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在,但不一定已被插入文檔中)。
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(`請設(shè)置操作權(quán)限標(biāo)簽值`)
}
}
}
}指令注冊:main.js
// 多個指令的使用
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$/))
})頁面使用
在具體的頁面,按鈕中只需引用v-has-permission指令,賦值判斷即可:
<el-button type="primary" v-has-permission="'page1:add'">新增</el-button>
到此這篇關(guān)于Vue利用自定義指令實現(xiàn)按鈕權(quán)限控制的文章就介紹到這了,更多相關(guān)Vue按鈕權(quán)限控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在Vue3中使用provide和inject進(jìn)行依賴注入的代碼詳解
在現(xiàn)代前端開發(fā)中,Vue.js已經(jīng)成為了非常流行的框架之一,它提供了極大的靈活性和可維護(hù)性,今天我們要探討的是Vue?3中的provide和inject功能,這是一種用于在組件樹中進(jìn)行依賴注入的方法,需要的朋友可以參考下2024-06-06
vue中watch和computed為什么能監(jiān)聽到數(shù)據(jù)的改變以及不同之處
這篇文章主要介紹了vue中watch和computed為什么能監(jiān)聽到數(shù)據(jù)的改變以及不同之處,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
vue實現(xiàn)錄音并轉(zhuǎn)文字功能包括PC端web手機端web(實現(xiàn)過程)
vue實現(xiàn)錄音并轉(zhuǎn)文字功能,包括PC端,手機端和企業(yè)微信自建應(yīng)用端,本文通過實例代碼介紹vue實現(xiàn)錄音并轉(zhuǎn)文字功能包括PC端web手機端web,感興趣的朋友跟隨小編一起看看吧2024-08-08
vue設(shè)計與實現(xiàn)合理的觸發(fā)響應(yīng)
這篇文章主要為大家介紹了vue設(shè)計與實現(xiàn)合理的觸發(fā)響應(yīng)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08

