vue自定義權(quán)限指令的實現(xiàn)
定義v-hasPermi指令
/** * v-hasPermi 操作權(quán)限處理 */ import useUserStore from '@/store/modules/user' export default { mounted(el, binding, vnode) { const { value } = binding const all_permission = "*:*:*"; const permissions = useUserStore().permissions; //permission為數(shù)組,在系統(tǒng)登錄后獲取保存至vueX中 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) } } else { throw new Error(`請設(shè)置操作權(quán)限標(biāo)簽值`) } } }
接口返回的permissions的格式
permissions: [ "plan:planadd:add", "plan:planadd:edit", "performance:plan:add", "performance:plan:edit", "system:role:submit", "performance:plan:list", ]
注冊指令
在index.js文件中
import hasPermi from './permission/hasPermi' export default function directive(app){ app.directive('hasPermi', hasPermi) }
掛載安裝指令
/* * main.js文件 */ import { createApp } from 'vue' import directive from './directive' // directive const app = createApp(App) directive(app)
在項目中使用
<el-button type="primary" @click="addTable(scope)" :disabled="btnDis" v-hasPermi="['deptManage:yearDispatch:add']" >添加</el-button >
到此這篇關(guān)于vue自定義權(quán)限指令的實現(xiàn)的文章就介紹到這了,更多相關(guān)vue自定義權(quán)限內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3的ref,computed,reactive和toRefs你都了解嗎
這篇文章主要為大家詳細(xì)介紹了vue3的ref,computed,reactive和toRefs,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03關(guān)于vue屬性使用和不使用冒號的區(qū)別說明
這篇文章主要介紹了關(guān)于vue屬性使用和不使用冒號的區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10前端vue中實現(xiàn)文件下載的幾種方法總結(jié)
這篇文章主要介紹了前端vue中實現(xiàn)文件下載的幾種方法總結(jié),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04詳解如何在Vue中快速實現(xiàn)數(shù)據(jù)可視化大屏展示
在現(xiàn)代數(shù)據(jù)驅(qū)動的應(yīng)用程序中,數(shù)據(jù)可視化大屏已經(jīng)成為了非常重要的一環(huán),通過對海量數(shù)據(jù)進(jìn)行可視化展示,可以幫助用戶更好地理解和分析數(shù)據(jù),從而做出更加明智的決策,在Vue中進(jìn)行數(shù)據(jù)可視化大屏展示也變得越來越流行,本文將介紹如何在Vue中快速實現(xiàn)數(shù)據(jù)可視化大屏展示2023-10-10基于node+vue實現(xiàn)簡單的WebSocket聊天功能
最近學(xué)習(xí)了一下websocket的即時通信,感覺非常的強(qiáng)大,這里我用node啟動了一個服務(wù)進(jìn)行websocket鏈接,然后再vue的view里面進(jìn)行了鏈接,進(jìn)行通信,廢話不多說,直接上代碼吧2020-02-02關(guān)于vue使用ant design vue,打包后a-date-picker控件無法選擇日期的問題
這篇文章主要介紹了關(guān)于vite .env.test環(huán)境使用ant design vue,打包后a-date-picker控件無法選擇日期的問題,本文針對這個問題提供了解決方法,需要的朋友可以參考下2023-04-04