Vue利用自定義指令實現(xiàn)按鈕權(quán)限控制
更新時間：2023年05月25日 14:13:13 作者：fuGUI
這篇文章主要為大家詳細介紹了Vue如何利用自定義指令實現(xiàn)按鈕權(quán)限控制效果，文中的示例代碼講解詳細，具有一定的學習價值，需要的可以參考下
背景
目前系統(tǒng)里面有一些頁面需要根據(jù)用戶的角色不同，顯示不同的按鈕，如果用戶分配了該按鈕權(quán)限就展示，否則沒有分配權(quán)限的按鈕就不展示。
實現(xiàn)原理
在 el-button 按鈕上設置標簽數(shù)值，利用 vue 的指令功能獲取按鈕實例對象和按鈕上綁定的標簽數(shù)值，與從接口拿到的按鈕權(quán)限數(shù)據(jù)進行匹配，如果匹配成功，證明用戶擁有該按鈕的使用權(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(`請設置操作權(quán)限標簽值`)
}
}
}
}指令注冊：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>
到此這篇關于Vue利用自定義指令實現(xiàn)按鈕權(quán)限控制的文章就介紹到這了,更多相關Vue按鈕權(quán)限控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue利用openlayers實現(xiàn)動態(tài)軌跡
這篇文章主要為大家介紹了vue利用openlayers實現(xiàn)動態(tài)軌跡，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
使用axios發(fā)送post請求,將JSON數(shù)據(jù)改為form類型的示例
今天小編就為大家分享一篇使用axios發(fā)送post請求,將JSON數(shù)據(jù)改為form類型的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
組件是可以在自己的模板中調(diào)用自身的,不過他們只能通過name選項來做這件事,下面這篇文章主要給大家介紹了關于vue3遞歸組件封裝的相關資料,需要的朋友可以參考下2021-09-09
Vue 2.0的數(shù)據(jù)依賴實現(xiàn)原理代碼簡析
本篇文章主要介紹了Vue 2.0的數(shù)據(jù)依賴實現(xiàn)原理代碼簡析，主要從初始化的數(shù)據(jù)層面上分析了Vue是如何管理依賴來到達數(shù)據(jù)的動態(tài)響應，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了vue props 一次傳多個值實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
使用vue實現(xiàn)grid-layout功能實例代碼
這篇文章主要介紹了使用vue實現(xiàn)grid-layout功能的代碼講解,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了vue如何動態(tài)給data中添加變量問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue前端對axios的封裝和使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了使用Bootrap和Vue實現(xiàn)仿百度搜索功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了vue模板語法-插值，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-03-03