vue根據(jù)權(quán)限動(dòng)態(tài)渲染按鈕、組件等的函數(shù)式組件實(shí)現(xiàn)
前端工作中對(duì)于權(quán)限的需求是難免的,最近項(xiàng)目中就有這樣的需求了。
后臺(tái)管理員可以新增前臺(tái)成員,不通的成員具有不同的權(quán)限,有權(quán)限的人員可以看到一些操作按鈕或者數(shù)據(jù)列表,反之則看不到。
那么也就是說(shuō),前端需要根據(jù)登錄用戶(hù)的權(quán)限來(lái)渲染指定的dom。
1、components文件下新建authorized文件夾
文件夾下新建auth.js校驗(yàn)權(quán)限
const checkAuth = (authName) => {
let authMap = ['admin', 'superAdmin', 'admin-1', 'landq'] // 根據(jù)實(shí)際項(xiàng)目需求配置
return authMap.includes(authName);
}
export default checkAuth;這里的authMap可以是從后臺(tái)動(dòng)態(tài)請(qǐng)求的,也可以是前端配置好的,甚至可以是其它格式的數(shù)據(jù),根據(jù)各人業(yè)務(wù)需求處理,大致思路是一樣的。
2、authorized文件夾下新建index.vue
<!-- 函數(shù)式組件 -->
<script>
import checkAuthorized from './auth';
export default {
functional: true, // 函數(shù)式組件
props: {
// 接收參數(shù)
authName: {
type: String,
required: true,
default: ''
}
},
render(h, context) {
let { props, scopedSlots } = context;
return checkAuthorized(props.authName)
? scopedSlots.default({
name: props.authName
})
: null;
}
};
</script>這里接收一個(gè)參數(shù),登錄用戶(hù)名,在render函數(shù)里做進(jìn)一步判斷,如果權(quán)限為true則返回默認(rèn)插槽里的dom,即渲染指定元素,反之返回null,不渲染
3、全局注冊(cè)main.js
、、、
import Authorized from '@/components/authorized'; // 權(quán)限
Vue.config.productionTip = false;
Vue.component('Authorized', Authorized);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");4、使用
<!-- authorized -->
<template>
<div class="authorized">
<Authorized authName="admin">
<el-button type="primary" slot-scope="data">{{
data.name
}}</el-button>
</Authorized>
</div>
</template><script>
export default {
components: {},
data() {
return {};
},
created() {},
//生命周期 - 掛載完成(可以訪問(wèn)DOM元素)
mounted() {},
computed: {},
//方法集合
methods: {}
};
</script><style lang='scss' scoped> //@import url(); 引入公共css類(lèi) </style>
當(dāng)authName='admin'時(shí),admin在authMap數(shù)組中,按鈕渲染了

當(dāng)authName='123'時(shí)便不會(huì)渲染

總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于vue狀態(tài)過(guò)渡transition不起作用的原因解決
這篇文章主要介紹了關(guān)于vue狀態(tài)過(guò)渡transition不起作用的原因解決,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
Vuejs使用addEventListener的事件如何觸發(fā)執(zhí)行函數(shù)的this
這篇文章主要介紹了Vuejs使用addEventListener的事件觸發(fā)執(zhí)行函數(shù)的this方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06
Vue+Vuex實(shí)現(xiàn)自動(dòng)登錄的知識(shí)點(diǎn)詳解
在本篇文章里小編給大家整理的是關(guān)于Vue+Vuex實(shí)現(xiàn)自動(dòng)登錄的知識(shí)點(diǎn)詳解,需要的朋友們可以學(xué)習(xí)下。2020-03-03
在vue中實(shí)現(xiàn)表單驗(yàn)證碼與滑動(dòng)驗(yàn)證功能的代碼詳解
在Web應(yīng)用程序中,表單驗(yàn)證碼和滑動(dòng)驗(yàn)證是常見(jiàn)的安全機(jī)制,用于防止惡意攻擊和機(jī)器人攻擊,本文將介紹如何使用Vue和vue-verify-code庫(kù)來(lái)實(shí)現(xiàn)表單驗(yàn)證碼和滑動(dòng)驗(yàn)證功能,需要的朋友可以參考下2023-06-06
Vue實(shí)現(xiàn)省市區(qū)級(jí)聯(lián)下拉選擇框
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)省市區(qū)級(jí)聯(lián)下拉選擇框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
Vue.js學(xué)習(xí)筆記之常用模板語(yǔ)法詳解
本篇文章主要介紹了Vue.js學(xué)習(xí)筆記之常用模板語(yǔ)法詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)面包屑
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)面包屑,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Vue監(jiān)測(cè)一個(gè)div寬度變化的幾種方法匯總
這篇文章主要介紹了在Vue中監(jiān)測(cè)div寬度變化的四種方法:使用ResizeObserver、結(jié)合Vue的watch、使用window resize事件和引入第三方庫(kù),每種方法都有其適用場(chǎng)景和注意事項(xiàng),推薦首選ResizeObserver,因?yàn)樗阅芨咔掖a簡(jiǎn)潔,需要的朋友可以參考下2026-03-03
Vue?elementui如何實(shí)現(xiàn)表格selection的默認(rèn)勾選
這篇文章主要介紹了Vue?elementui如何實(shí)現(xiàn)表格selection的默認(rèn)勾選問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06

