springboot vue 实现动态路由（前端）

前言

项目的后端用的是springboot2.6。前端是vue2 基于vue admin template开发

本文主要讲解动态路由的实现 需要完整代码请参考权限系统

前端

路由配置文件router/index.js

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

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

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' }
    }]
  },
]



/**
 * asyncRoutes
* 需要根据用户角色动态加载的路由
 */
export const asyncRoutes = [
    // 404页面需要放到最后 !!!
    { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  mode: 'history', // require service support  需要服务支持
  // mode:'hash',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router  重置路由器
}

export default router

获取用户菜单信息api/user.js

export function getInfo(id) {
  return request({
    url: `/menu/userInfo`,
    method: 'get',
  })
}

加载动态路由store/modules/permission.js

// 获取用户菜单信息
import {getInfo} from "@/api/user"
// 导入路由脚本文件中的方法
import { asyncRoutes, constantRoutes } from '@/router'

/* Layout */
import Layout from '@/layout'


/**
* 使用 meta.role 确定当前用户是否具有权限
 * @param roles
 * @param route
 */

// 权限判定
function hasPermission(roles, route) {
  
  // meta中是否有roles中的角色  包含返回true  否则false meta中没有roles则默认返回true
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}

/**
* 按递归过滤异步路由表
 * @