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你都了解嗎
這篇文章主要為大家詳細介紹了vue3的ref,computed,reactive和toRefs,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助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ù)進行可視化展示,可以幫助用戶更好地理解和分析數(shù)據(jù),從而做出更加明智的決策,在Vue中進行數(shù)據(jù)可視化大屏展示也變得越來越流行,本文將介紹如何在Vue中快速實現(xiàn)數(shù)據(jù)可視化大屏展示2023-10-10
基于node+vue實現(xiàn)簡單的WebSocket聊天功能
最近學(xué)習(xí)了一下websocket的即時通信,感覺非常的強大,這里我用node啟動了一個服務(wù)進行websocket鏈接,然后再vue的view里面進行了鏈接,進行通信,廢話不多說,直接上代碼吧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

