Before the implementation of management functions, these two routes are actually written dead, any user login can see all routes, our requirements are: different users according to the different permissions to see the menu is different

In routing, we divide the routing into two parts, dynamic routing and static routing

Dynamic route: routes that users can access based on permission

Static route: a route accessible to all users

In initializing the routeindex.jsCentral Plains route, then start operation

import Vue from 'vue'
import Router from 'vue-router'

// Import the dynamic routing module
import departmentsRouter from './modules/departmentsRouter.js'
import settingRouter from './modules/settingRouter.js'
import employeesRouter from './modules/employeesRouter.js'
import permissionRouter from './modules/permissionRouter.js'

Vue.use(Router)

// Dynamic routing
export const asyncRoutes = [
  departmentsRouter, // Department management
  settingRouter, // Role management
  employeesRouter, // Staff management
  permissionRouter, // Permission management
]

// Static routes (pages that can be accessed without special permission controls)
export const constantRoutes =[
    / / a little
]

const router = createRouter()
const createRouter =  () = > new Router({
  scrollBehavior: () = > ({ y: 0 }),
  // Merge two routes
  routes: [...constantRoutes, ...asyncRoutes]
})

export default router
Copy the code

Delete the merged dynamic route

routes: [...constantRoutes]
Copy the code

Because different users log in to see the page displayed according to their permissions, we operate in the front routing guard

/ Route front-guard const whiteList = ['/login', '/404'] router.beforeEach(async(to, from, next) => {// Restrict jump // Login user cannot return to login again, Const token = store.state.user.token nprogress.start () if (token) {if (to.path === '/login') {if (to.path === '/login') { Next ('/') nprogress.done ()} else {// If (! store.state.user.userInfo.userId) { // 1. Await store.dispatch('user/getUserProfile') // Filter dynamic routes based on user permissions stored in vuEX const userMenu = store.state.user.userInfo.roles.menus const res = asyncRoutes.filter(item => userMenu.includes(item.children[0].name)) Res.push ({path: '*', redirect: '/404', hidden: {path: '*', redirect: '/404', hidden: True}) // Dynamically generate accessible menus: Router.addroutes (res) store.com MIT ('menu/setMenuList', res) to, // next({ ... To}) to ensure that the page is reentered after the route is added. True // Reprogress once, No duplicate history})} else {next()}} else {// No token if (whitelist.includes (to.path)) {next()} else {next('/login')}} })Copy the code

The main codes are as follows:

Store static and dynamic routes in vuEX

Import {constantRoutes} from '@/router' export default {namespaced: true, state: {// Start with static routes as the initial value of menu data menuList: [...constantRoutes]}, mutations: {setMenuList(state, asyncRoutes) {// Combine dynamic and static routes state.menuList = [...constantRoutes,...asyncRoutes]}}}Copy the code

To obtain a route from vuex, use the ROUTER API, router.addroutes () to dynamically add the user access permission route obtained from vuex

// Await store.dispatch('user/getUserProfile') // Filter dynamic routes according to user permissions stored in vuEX const userMenu = store.state.user.userInfo.roles.menus const res = asyncRoutes.filter(item => userMenu.includes(item.children[0].name)) Res.push ({path: '*', redirect: '/404', hidden: {path: '*', redirect: '/404', hidden: Router.addroutes (res) store.com MIT ('menu/setMenuList', res)Copy the code

Because this method can only access the routing page, and the menu is not yet rendered, find the menu page and render it to the page

<template>
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
</template>
<script>
export default {
    computed:{
        routes(){
            return this.$store.state.menu.menuList
        }
    }
}
</script>
Copy the code

After testing different accounts, you can realize the function of displaying different menus according to the permissions of different accounts