vuex vue-router动态路由

1、permissionRoute.js

import { asyncRouterMap, constantRouterMap } from '@/router'

import Layout from '@/views/layout/Layout'



function importComponent(file) {
  return require('@/views/' + file + '.vue').default
}

/**
 * 通过meta.role判断是否与当前用户权限匹配
 * @param roles
 * @param route
 */
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}

/**
 * 递归过滤异步路由表，返回符合用户角色权限的路由表
 * @param routes asyncRouterMap
 * @param roles
 */
function filterAsyncRouter(asyncRouterMap) {
  let accessedRouters = asyncRouterMap.filter(route => {
    
    
    if (route.component) {
      if (route.component === 'Layout') {//Layout组件特殊处理
        route.component = Layout
      } else {
        route.component = importComponent(route.component)
      }
    }
    if (route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children)
    }
    return true
  })
  
  return accessedRouters
}


const permissionRoute = {
  state: {
    routes: [],
    addRoutes: []
  },
  mutations: {
    SET_ROUTES: (state, routes) => {
      
      state.addRoutes = routes
      console.log(constantRouterMap)
      state.routes = constantRouterMap.concat(routes)
    }
  },
  actions: {
    GenerateRoutes({ commit }, asyncRouterMap) {
      return new Promise(resolve => {
        
        let accessedRoutes = []