vue根據權限動態(tài)渲染按鈕、組件等的函數式組件實現(xiàn)
更新時間：2023年11月09日 10:25:28 作者：donggua_123
這篇文章主要介紹了vue根據權限動態(tài)渲染按鈕、組件等的函數式組件實現(xiàn)方式,具有很好的參考價值,希望杜大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
前端工作中對于權限的需求是難免的，最近項目中就有這樣的需求了。
后臺管理員可以新增前臺成員，不通的成員具有不同的權限，有權限的人員可以看到一些操作按鈕或者數據列表，反之則看不到。
那么也就是說，前端需要根據登錄用戶的權限來渲染指定的dom。
1、components文件下新建authorized文件夾
文件夾下新建auth.js校驗權限
const checkAuth = (authName) => {
let authMap = ['admin', 'superAdmin', 'admin-1', 'landq'] // 根據實際項目需求配置
return authMap.includes(authName);
}
export default checkAuth;這里的authMap可以是從后臺動態(tài)請求的，也可以是前端配置好的，甚至可以是其它格式的數據，根據各人業(yè)務需求處理，大致思路是一樣的。
2、authorized文件夾下新建index.vue
<!-- 函數式組件 -->
<script>
import checkAuthorized from './auth';
export default {
functional: true, // 函數式組件
props: {
// 接收參數
authName: {
type: String,
required: true,
default: ''
}
},
render(h, context) {
let { props, scopedSlots } = context;
return checkAuthorized(props.authName)
? scopedSlots.default({
name: props.authName
})
: null;
}
};
</script>這里接收一個參數，登錄用戶名，在render函數里做進一步判斷，如果權限為true則返回默認插槽里的dom，即渲染指定元素，反之返回null，不渲染
3、全局注冊main.js
、、、
import Authorized from '@/components/authorized'; // 權限
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() {},
//生命周期 - 掛載完成（可以訪問DOM元素）
mounted() {},
computed: {},
//方法集合
methods: {}
};
</script><style lang='scss' scoped> //@import url(); 引入公共css類 </style>
當authName='admin'時，admin在authMap數組中，按鈕渲染了
當authName='123'時便不會渲染
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)3D環(huán)形圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue實戰(zhàn)教程之仿肯德基宅急送App，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
VUE2.0+ElementUI2.0表格el-table實現(xiàn)表頭擴展el-tooltip
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table實現(xiàn)表頭擴展el-tooltip，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
在 Vue 3 中,一個重要的特性是 watch 選項,它允許開發(fā)者對數據變化進行觀察,本篇博客將詳細介紹如何在 Vue 3 中使用 watch 進行深度觀察,特別是在使用 setup 語法糖時,需要的朋友可以參考下2024-11-11
Javascript vue.js表格分頁，ajax異步加載數據
這篇文章主要介紹了Javascript vue.js表格分頁，ajax異步加載數據的相關資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了如何去除element-ui中table的hover效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue通過provide inject實現(xiàn)組件通信
這篇文章主要介紹了Vue通過provide inject實現(xiàn)組件通信,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
Vue?先初始化父組件再初始化子組件的方法(自定義父子組件mounted執(zhí)行順序)
這篇文章主要介紹了Vue?先初始化父組件再初始化子組件的方法（自定義父子組件mounted執(zhí)行順序）,本篇內容內容主要講述了,在使用?Konva?進行開發(fā)過程中遇到的一些問題,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細介紹了Vue的組件化，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
項目當中如果做新增/修改/刪除等等操作通常情況下都需要刷新數據或者刷新當前頁面。本文為大家整理了三種不同的實現(xiàn)方法，需要的可以參考一下2023-01-01