uniapp怎么根据登录用户的角色不同动态改变tabbar内容

Question

uniapp怎么根据登录用户的角色不同动态改变tabbar内容，两种角色，一种是管理员，tabbar需要显示四个，一类是普通用户，tabbar显示两个就可以，哪位大佬有思路或者经验传授一下，感激不尽！！！！

Answer 1

我之前贴出的地址有bug，切换用户角色登录时，tabbar不会自己发生改变，需要手动刷新，下面是我在之前代码的基础上进行修改的部分

有些名称我改了，大家写的时候注意下自己定义的名称

1、修改store/modules/tabbar.js

import tabBar from '../../untils/tabBar.js'

const tabBer = {
	state: {
		role: '',
		tabBarList: []
	},

	// mutations改变state里的数据
	mutations: {
		setRole(state,role){
			state.role = role			
			var i = state.role === 'null' ? 'admin' : 'ordinary'
			state.tabBarList = tabBar[i]
		},
	}
}

export default tabBer

2、修改getters.js （此项就是改了一下名称，没啥太大变动）

const getters = {
    tabBarList: state => state.tabBer.tabBarList,
    role: state => state.tabBer.role
};

export default getters

3、页面登录成功后    存储用户身份，调用vuex方法进行判断

uni.setStorageSync('baseId', baseId)
this.$store.commit('setRole', baseId)

// 如果是另外一种角色
uni.setStorageSync('baseId', 'null')
this.$store.commit('setRole', 'null')

baseId为需要用来判断的用户角色

 

4、APP.vue解决vuex刷新数据丢失问题

<script>
	import{mapState, mapMutations} from 'vuex'
	export default {
		onLaunch: function() {
			let role = uni.getStorageSync('baseId') // 判断用户是否已登录
			if(role) {
				this.setRole(role)
			}
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods: {
			...mapMutations(['setRole'])
		}
	}
</script>