vue自定義權(quán)限指令的實(shí)現(xiàn)
更新時(shí)間：2024年05月15日 10:37:25 作者：????????楓沂
本文主要介紹了vue自定義權(quán)限指令的實(shí)現(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(`請(qǐng)?jiān)O(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",
]注冊(cè)指令
在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)
在項(xiàng)目中使用
<el-button
type="primary"
@click="addTable(scope)"
:disabled="btnDis"
v-hasPermi="['deptManage:yearDispatch:add']"
>添加</el-button
>
到此這篇關(guān)于vue自定義權(quán)限指令的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue自定義權(quán)限內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
vue3的ref,computed,reactive和toRefs你都了解嗎
這篇文章主要為大家詳細(xì)介紹了vue3的ref,computed,reactive和toRefs，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
關(guān)于vue屬性使用和不使用冒號(hào)的區(qū)別說(shuō)明
這篇文章主要介紹了關(guān)于vue屬性使用和不使用冒號(hào)的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
前端vue中實(shí)現(xiàn)文件下載的幾種方法總結(jié)
這篇文章主要介紹了前端vue中實(shí)現(xiàn)文件下載的幾種方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
專業(yè)級(jí)Vue?多級(jí)菜單設(shè)計(jì)
這篇文章主要為大家介紹了專業(yè)級(jí)的Vue?多級(jí)菜單設(shè)計(jì)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue的樣式綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要給大家介紹了關(guān)于npm踩坑問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)打地鼠小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
詳解如何在Vue中快速實(shí)現(xiàn)數(shù)據(jù)可視化大屏展示
在現(xiàn)代數(shù)據(jù)驅(qū)動(dòng)的應(yīng)用程序中,數(shù)據(jù)可視化大屏已經(jīng)成為了非常重要的一環(huán),通過(guò)對(duì)海量數(shù)據(jù)進(jìn)行可視化展示,可以幫助用戶更好地理解和分析數(shù)據(jù),從而做出更加明智的決策,在Vue中進(jìn)行數(shù)據(jù)可視化大屏展示也變得越來(lái)越流行,本文將介紹如何在Vue中快速實(shí)現(xiàn)數(shù)據(jù)可視化大屏展示2023-10-10
基于node+vue實(shí)現(xiàn)簡(jiǎn)單的WebSocket聊天功能
最近學(xué)習(xí)了一下websocket的即時(shí)通信，感覺(jué)非常的強(qiáng)大，這里我用node啟動(dòng)了一個(gè)服務(wù)進(jìn)行websocket鏈接，然后再vue的view里面進(jìn)行了鏈接，進(jìn)行通信，廢話不多說(shuō)，直接上代碼吧2020-02-02
關(guān)于vue使用ant design vue,打包后a-date-picker控件無(wú)法選擇日期的問(wèn)題
這篇文章主要介紹了關(guān)于vite .env.test環(huán)境使用ant design vue,打包后a-date-picker控件無(wú)法選擇日期的問(wèn)題,本文針對(duì)這個(gè)問(wèn)題提供了解決方法,需要的朋友可以參考下2023-04-04