Vue利用自定義指令實現(xiàn)按鈕權(quán)限控制
背景
目前系統(tǒng)里面有一些頁面需要根據(jù)用戶的角色不同,顯示不同的按鈕,如果用戶分配了該按鈕權(quán)限就展示,否則沒有分配權(quán)限的按鈕就不展示。
實現(xiàn)原理
在 el-button 按鈕上設(shè)置標簽數(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(`請設(shè)置操作權(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>
到此這篇關(guān)于Vue利用自定義指令實現(xiàn)按鈕權(quán)限控制的文章就介紹到這了,更多相關(guān)Vue按鈕權(quán)限控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue 使用Props屬性實現(xiàn)父子組件的動態(tài)傳值詳解
今天小編就為大家分享一篇Vue 使用Props屬性實現(xiàn)父子組件的動態(tài)傳值詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue實現(xiàn)拖拽的簡單案例 不超出可視區(qū)域
這篇文章主要為大家詳細介紹了vue實現(xiàn)拖拽的簡單案例,不超出可視區(qū)域,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-07-07
VUE跳轉(zhuǎn)外部鏈接與網(wǎng)頁的方法示例
這篇文章主要給大家介紹了關(guān)于VUE跳轉(zhuǎn)外部鏈接與網(wǎng)頁的方法,記錄一下在vue項目中如何實現(xiàn)跳轉(zhuǎn)到一個新頁面,需要的朋友可以參考下2023-06-06
Vue.js實現(xiàn)實例搜索應(yīng)用功能詳細代碼
本文給大家分享Vue.js實現(xiàn)實例搜索應(yīng)用功能詳細代碼,非常不錯,感興趣的朋友參考下吧2017-08-08
解決VueCil代理本地proxytable無效報錯404的問題
這篇文章主要介紹了解決VueCil代理本地proxytable無效報錯404的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
如何在Vue3和Vite項目中用SQLite數(shù)據(jù)庫進行數(shù)據(jù)存儲
SQLite是一種嵌入式關(guān)系型數(shù)據(jù)庫管理系統(tǒng),是一個零配置、無服務(wù)器的、自給自足的、事務(wù)性的SQL數(shù)據(jù)庫引擎,這篇文章主要給大家介紹了關(guān)于如何在Vue3和Vite項目中用SQLite數(shù)據(jù)庫進行數(shù)據(jù)存儲的相關(guān)資料,需要的朋友可以參考下2024-03-03

