微信小程序，要求页面根据后台返回的权限列表进行显示

切换鉴权

底部tab是自定义的进行切换前，判断是否有权限，没有权限则禁止切换

changeActive(name) {
				if (!this.getMenu(name)) {
					uni.$u.toast('您的权限不足')
				} else {
					this.active = name
				}
			},

进入页面鉴权

进入页面后，4个页面按照排序进行依次判断，哪个页面有权限就显示哪个页面。

list: ['Home', 'workbench', 'Book', 'won']
// 权限遍历判断显示页面 如果首页有权限就显示首页,如果首页没有,工作台有,就显示工作台页面
			getShowPage() {
				var that = this;
				try {
					that.list.forEach(function(item, index) {
						that.menuList.forEach((type) => {
							console.log(type)
							if (item == type.SourceCode) {
								console.log(item)
								that.active = item
								throw new Error("中断循环");
							}
						});
					});
				} catch (e) {
					console.log(e)
				};
			},

完整代码

<template>
	<view class="homepage">
		<home v-if="active=='Home'" v-show="getMenu('Home')"></home>
		<workbench v-if="active=='workbench'" v-show="getMenu('workbench')"></workbench>
		<addressBook v-if="active=='Book'" v-show="getMenu('Book')"></addressBook>
		<my v-if="active=='won'" v-show="getMenu('won')"></my>
		<div>
			<u-tabbar :border="false" :value="active" activeColor="rgba(64, 135, 255, 1)"
				inactiveColor="rgba(110, 112, 149, 1)" @change="changeActive" :fixed="true" :safeAreaInsetBottom="true"
				:placeholder="true">
				<u-tabbar-item text="首页" name="Home">
					<image class="u-page__item__slot-icon tabbarimg" slot="active-icon"
						src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/footernav1_hover.png">
					</image>
					<image class="u-page__item__slot-icon tabbarimg" slot="inactive-icon"
						src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/footernav1.png"></image>
				</u-tabbar-item>
				<u-tabbar-item text="工作台" :badge="total" name="workbench">
					<image class="u-page__item__slot-icon tabbarimg" slot="active-icon"
						src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/footernav2_hover.png">
					</image>
					<image class="u-page__item__slot-icon tabbarimg" slot="inactive-icon"
						src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/footernav2.png"></image>
				</u-tabbar-item>
				<u-tabbar-item text="通讯录" name="Book">
					<image class="u-page__item__slot-icon tabbarimg" slot="active-icon"
						src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/footernav3_hover.png">
					</image>
					<image class="u-page__item__slot-icon tabbarimg" slot="inactive-icon"
						src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/footernav3.png"></image>
				</u-tabbar-item>
				<u-tabbar-item text="我的" name="won">
					<image class="u-page__item__slot-icon tabbarimg" slot="active-icon"
						src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/footernav4_hover.png">
					</image>
					<image class="u-page__item__slot-icon tabbarimg" slot="inactive-icon"
						src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/footernav4.png"></image>
				</u-tabbar-item>
			</u-tabbar>
		</div>
	</view>
</template>

<script>
	import {
		GetBillAlarm,
		GetMemnus
	} from '@/config/api.js'
	import my from './my/index.vue'
	import home from './home/index.vue'
	import workbench from './workbench/index.vue'
	import addressBook from './addressBook/index.vue'
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			my,
			home,
			workbench,
			addressBook
		},
		data() {
			return {
				show: false,
				active: '',
				AccountId: '',
				list: ['Home', 'workbench', 'Book', 'won']
			}
		},
		props: {
			name: {
				type: String,
				default () {
					return '';
				}
			}
		},
		computed: {
			...mapGetters(['billAlarm', 'menuList']),
			total: function() {
				return this.billAlarm.SendBillCount + this.billAlarm.OrderBillCount + this.billAlarm.PaymentBillCount +
					this.billAlarm.AdjustPriceBillCount
			},
		},
		onLoad() {
			this.AccountId = JSON.parse(uni.getStorageSync('userData')).Id
			this.getdata()
			this.GetMemnus()
		},
		methods: {
			getMenu(id) {
				var isShow = false
				this.menuList.forEach((type) => {
					if (id === type.SourceCode) {
						isShow = true
					}
				})
				return isShow
			},
			changeActive(name) {
				if (!this.getMenu(name)) {
					uni.$u.toast('您的权限不足')
				} else {
					this.active = name
				}
			},
			// 权限遍历判断显示页面 如果首页有权限就显示首页,如果首页没有,工作台有,就显示工作台页面
			getShowPage() {
				var that = this;
				try {
					that.list.forEach(function(item, index) {
						that.menuList.forEach((type) => {
							console.log(type)
							if (item == type.SourceCode) {
								console.log(item)
								that.active = item
								throw new Error("中断循环");
							}
						});
					});
				} catch (e) {
					console.log(e)
				};
			},
			// 获取权限页面
			GetMemnus() {
				var that = this;
				GetMemnus({
					params: {
						accountId: this.AccountId
					},
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.Code == 200) {
						that.$store.commit('menuList', res.Data);
						that.getShowPage()
					}
				}).catch(err => {

				})
			},
			getdata() {
				var that = this;
				GetBillAlarm({
					params: {
						AccountId: this.AccountId
					},
					custom: {
						auth: true
					}
				}).then(res => {
					setTimeout(() => {
						that.getdata()
					}, 5000)
					if (res.Code == 200) {
						this.$store.commit('billAlarm', res.Data);
					}
				}).catch(err => {

				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.tabbarimg {
		width: 42rpx;
		height: 42rpx;
	}

	.homepage {
		background: #F5F6FA;
	}

	.tabbar {
		box-shadow: 0px 2rpx 22rpx 0px rgba(0, 0, 0, 0.07);
	}
</style>