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(`請?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",
]注冊指令
在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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了vue2中如何使用swiper@5.4.5問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
策略模式實(shí)現(xiàn) Vue 動(dòng)態(tài)表單驗(yàn)證的方法
策略模式（Strategy Pattern）又稱政策模式，其定義一系列的算法，把它們一個(gè)個(gè)封裝起來，并且使它們可以互相替換。封裝的策略算法一般是獨(dú)立的，策略模式根據(jù)輸入來調(diào)整采用哪個(gè)算法。這篇文章主要介紹了策略模式實(shí)現(xiàn) Vue 動(dòng)態(tài)表單驗(yàn)證,需要的朋友可以參考下2019-09-09
使用typescript構(gòu)建Vue應(yīng)用的實(shí)現(xiàn)
這篇文章主要介紹了使用typescript構(gòu)建Vue應(yīng)用的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
在Vue.js項(xiàng)目中,構(gòu)建后的資源文件（如CSS、JavaScript文件、圖片等）通常會(huì)被放置在指定的目錄下,為了確保這些文件能夠被正確加載,Vue CLI 提供了配置選項(xiàng)來指定這些文件的路徑,本文給大家介紹了Vue打包為相對路徑的具體實(shí)現(xiàn)方法,需要的朋友可以參考下2024-09-09
Vue.js構(gòu)建你的第一個(gè)包并在NPM上發(fā)布的方法步驟
這篇文章主要介紹了Vue.js構(gòu)建你的第一個(gè)包并在NPM上發(fā)布的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了vue頂部菜單欄實(shí)現(xiàn)小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
vue-cli腳手架打包靜態(tài)資源請求出錯(cuò)的原因與解決
這篇文章主要給大家介紹了關(guān)于vue-cli腳手架打包靜態(tài)資源請求出錯(cuò)的原因與解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue-cli具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家詳細(xì)介紹了Vue非父子組件通信的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了如何利用vite快速搭建vue3項(xiàng)目問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Elementui表格組件+sortablejs實(shí)現(xiàn)行拖拽排序的示例代碼
這篇文章主要介紹了Elementui表格組件+sortablejs實(shí)現(xiàn)行拖拽排序，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08