Tabbar implementation of dynamic bottom navigation bar in uniapp, authority management

uniapp middle voice tabbar Realization

Sometimes according to the needs of the business , Need to implement permissions , Or the dynamic bottom navigation bar , This is one of the implementation methods , I use it myself .
This method requires the help of uView Custom navigation bar
Introduce... In the normal way uView, Just import it on the page where you need to use the navigation bar .
however page.json It should also be configured normally

Pages needed

<template>
	<view class="body">
        <u-tabbar v-model="current" :before-switch="beforeSwitch" active-color="#1d6869" :list="tabarList"></u-tabbar>
    </view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";


	export default {
		components: {},
		data() {
			return {};
		},
		computed: {
			...mapState(["tabarList"]),
		},
		onLoad() {},

		methods: {
			...mapMutations(["setTabarList"]),
			beforeSwitch(index) {
				if (this.tabarList[index].text == " Customer service ") {
					this.kfshow = true;
					return false;
				} else {
					return true;
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
</style>

Create directory utils/tabBar.js
This is the directory that encapsulates permissions

//  Individual users 
const member = [{
    
		iconPath: "home",
		selectedIconPath: "home-fill",
		text: ' Personal homepage ',
		customIcon: false,
		pagePath: '/pages/index/index',
	},

	{
    
		iconPath: "account",
		selectedIconPath: "account-fill",
		text: ' my ',
		isDot: false,
		pagePath: '/pages/my/my',
	},
]
//  Enterprise users 


const firm = [
	{
    
		iconPath: "account",
		selectedIconPath: "account-fill",
		text: ' Enterprise homepage ',
		isDot: false,
		pagePath: '/pages/enterprise/enterprise'
	},

	{
    
		iconPath: "account",
		selectedIconPath: "account-fill",
		text: ' my ',
		isDot: false,
		pagePath: '/pages/my/my',
	},
]

export default {
    
	member,
	firm
}

utilize vuex, Create directory store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import storage from '../common/storage'
import tabBar from '@/untils/tabBar.js'

Vue.use(Vuex)

//  Get the type of user , You can also judge the specific permissions according to the business 
let userInfo = storage.getJson('userInfo')

let type = 'member'

if(userInfo != null){
    
	switch(userInfo.utype){
    
		case '1':
			type = 'member'
			break;
		case '2':
			type = 'firm'
			break;
		default:
			break;
	}
}

const store = new Vuex.Store({
    
	state: {
    
		tabarList: tabBar[type], //  Dynamic bottom navigation bar 
	},
	mutations: {
    
        setTabarList(state, list) {
    
			state.tabarList = list
		},
	},
	getters: {
    
	},
	actions: {
    
	}
})

export default store

main.js To configure

import store from './store'
Vue.prototype.$store = store

Encapsulate methods that can be called globally , Call... Where needed , Change the bottom navigation bar in real time

import storage from "./storage";
import store from '../store'
import tabBar from '@/untils/tabBar.js'

export default {
    
   set(name, value) {
    
      uni.setStorageSync(name, value);
   },
   get(name) {
    
      return uni.getStorageSync(name);
   },
   remove(name) {
    
      uni.removeStorageSync(name);
   },
   clear() {
    
      uni.clearStorageSync();
   },
   changeList() {
    
      let userInfo = storage.getJson("userInfo");
      let type = "member";

      if (userInfo != null) {
    
         switch (userInfo.utype) {
    
            case "1":
               type = "member";
               break;
            case "2":
               type = "firm";
               break;
            default:
               break;
         }
      }

      store.state.tabarList = tabBar[type];
   },
};

Log in successfully , Exit account , Log in again , Or switching identities and other calls

//  Call it once , Avoid secondary rendering , Log out , eliminate this.$storage.clear()
let isTabbar = this.$storage.get("isTabbar");

if (isTabbar == "") {
    
  this.$storage.set("isTabbar", 1);
  this.$storage.changeList()
}