vue2 element路由权限配置

1. store/module/新建permission.js文件

import {
  asyncRoutes,
  constantRoutes
} from '@/router'

/**
   * Use meta.role to determine if the current user has permission
   * @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
  }
}

/**
   * Filter asynchronous routing tables by recursion
   * @param routes asyncRoutes
   * @param roles
   */
export function filterAsyncRoutes(routes, roles) {
  const res = []

  routes.forEach(route => {
    const tmp = { ...route
    }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })

  return res
}

const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({
    commit
  }, roles) {
    return new Promise(resolve => {
      const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      console.log('aaas', accessedRoutes)
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

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

2.在store/index.js中引入

import permission from './modules/permission'

3.router文件修改

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

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

4.store/getters.js文件新增

permission_routes: state => state.permission.routes

5.src/permission.js文件增加（通过获取用户信息获取到对应的权限）

const userInfo = await store.dispatch('user/getInfo')
const accessRoutes = await store.dispatch('permission/generateRoutes', userInfo.roles)
router.addRoutes(accessRoutes)
next({ ...to, replace: true })

6.layout/components/sidebar/index.vue文件修改