码云仓库地址: https://gitee.com/shayvmo/vue-element-template

基于 vue-admin-template 基础模板实现动态生成侧边栏菜单

【思路】

获取用户信息的时候,把后端返回的路由保存在 store 里面,执行生成路由时,合并前端静态定义的路由以及后端获取回来的动态路由

【主要修改文件】

src/permission.js

src/store/modules/permission.js

utils/_import.js

utils/router.js

文件: src/permission.js

获取用户信息,存储路由

const { roles } = await store.dispatch('basic/getInfo')

合并路由,渲染路由

const accessRoutes = await store.dispatch('permission/generateRoutes', { 'roles': roles, 'routers': store.getters.routers })

【后端返回数据结构】

具体根据 框架 原本需要返回的结构即可。组件那里返回组件名称,会实现自动加载

routers = [
{
path: '/',
component: 'Layout',
redirect: '/dashboard',
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: 'dashboard',
meta: {
title: '仪表盘',
icon: 'dashboard'
}
}
]
}
]

【 vue-element-admin 】
https://panjiachen.github.io/vue-element-admin-site/zh/