根据权限动态加载路由

1.在Vuex中编写渲染的路由

import { constantRoutes, asyncRoutes } from '@/router'
const state = {
  routes: [
    ...constantRoutes
  ]

}
const mutations = {
  setRoutes(state, otherRoutes) {
    state.routes = [...state.routes, ...otherRoutes]
  }
}
const actions = {
  filterRoutes({ commit }, menus) {
    const otherRoutes = asyncRoutes.filter(item => {
      return menus.includes(item.name)
    })
    commit('setRoutes', otherRoutes)
    return otherRoutes
  }
}
const getters = {}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

router模块的代码

import approvalsRouter from './modules/approvals'
import departmentsRouter from './modules/departments'
import employeesRouter from './modules/employees'
import permissionRouter from './modules/permission'
import attendancesRouter from './modules/attendances'
import salarysRouter from './modules/salarys'
import settingRouter from './modules/setting'
import socialRouter from './modules/social'
import imports from './modules/imports'
// 动态路由
export const asyncRoutes = [
  approvalsRouter,
  departmentsRouter,
  employeesRouter,
  permissionRouter,
  attendancesRouter,
  salarysRouter,
  settingRouter,
  socialRouter,
  imports
]

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard' }
    }]
  },

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

2.在permission.js中获取后台传来的权限修改路由表

if (!store.state.user.userInfo.userId) {
    const res = await store.dispatch('user/getUserInfo')
    // 可以拿到用户权限
    // 拿到权限后怎么动态的添加路由性
    // addRoutes  可以在router对象上新增路由
    // this.$router.options.routes 只能取创建VueRouter实例的时候传过去的路由
    // 动态添加的路由娶不到
    // addRoutes是一个异步的
    // menus里面存的是用户对应的页面权限
    const { roles: { menus }} = res
    console.log('menus', menus)
    const otherRoutes = await store.dispatch('permission/filterRoutes', menus)
    router.addRoutes([
      ...otherRoutes,
      { path: '*', redirect: '/404', hidden: true }
    ]) // 不是一个响应式的
    // 为了让用户看到对应的导航 重新进一哦页面
    // 进入死循环 直到路由添加成功后，同让用户重新进一次页面
    next({
      ...to,
      replace: true
    })
  } else {
    next()
  }
}

3.退出后清空路由表

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

    logout({ commit }) {
      commit('removeToken')
      commit('removeUserInfo')
      // 清除路由表     // 从router中导入的方法
      resetRouter()
      // 清除vue的路由表  root:true 属性表示不同的commit删除不同的
      commit.commit('permission/setRoutes', [], { root: true })
    }