作者提供了一套简洁好用的前端框架，但对于后台个人开发者想要真正的用起来，加入角色权限的功能，动态路由就必须要改造，对于这一块作者已经帮我们实现了太多的东西，我们只需要做一些小小的改动便可实现该功能。
下面是我的实现过程
1.首先左侧的菜单是我们想要改造的
image.png
在代码中，我们在
src/router/index.js文件
/**
* 1、我们知道上面图中知道菜单就是从“asyncRoutes”数组中来的
* 2、要做的工作就是替代这个数组，并且追加到"router"中去
*/
// 首先把这个数组删除掉，因为后面我们会通过请求获得数据，然后重新组装这样的路由
let asyncRoutes = [
{
meta: {
title: '演示',
icon: 'sidebar-default'
},
children: [
system_manage,
MultilevelMenuExample,
BreadcrumbExample,
KeepAliveExample,
menuBadgeExample,
tabExample,
ComponentBasicExample,
ComponentExtendExample,
IconExample,
FontExample,
AnimateExample,
ChartExample,
PrintExample,
I18nExample,
PermissionExample,
MockExample,
BugExample
]
},
{
meta: {
title: '页面',
icon: 'ri-pages-line'
},
children: [
...PagesExample
]
},
{
meta: {
title: '教程',
icon: 'ri-movie-line'
},
children: [
...VideosExample
]
},
{
meta: {
icon: 'ri-more-fill'
},
children: [
ExTernalLinkExample
]
}
]
接下来，找到router.beforeEach方法中这个地方，这个方法会对路由进行权限【查看、编辑、删除、添加】做一些处理
const accessRoutes = await store.dispatch('menu/generateRoutes', {
asyncRoutes,
currentPath: to.path
})
router.addRoutes(accessRoutes)
router.addRoutes(lastRoute)
其中asyncRoutes参数是我们前面删除的数组，这个是我们要通过请求来返回的数据，接下我进行改造如下：
store.dispatch('menu/roleMenu', {account: 'admin'}).then(async asyncRoutes => {
// console.log(asyncRoutes)
const accessRoutes = await store.dispatch('menu/generateRoutes', {
asyncRoutes,
currentPath: to.path
})
router.addRoutes(accessRoutes)
router.addRoutes(lastRoute)
next({ ...to, replace: true })
})
在src/store/modules/menu.js文件的actions中添加发送请求的方法
// 请求角色路由
roleMenu({ commit }, data) {
return new Promise(resolve => {
api.post('api/menu/roleMenu', data).then(async res => {
// console.log(res)
const data = eachMenu(res.data)
resolve(data, commit)
})
})
}
下面是这个接口api/menu/roleMenu返回的路由数据
{
"success":true,
"message":"Success",
"data":[
{
"children":[
{
"redirect":"/system_manage/page",
"path":"/system_manage",
"component":"layout",
"children":[
{
"path":"page",
"component":"system_manage/user_manage/user_manage.vue",
"parent_id":"12",
"meta":{
"icon":"ri-user-2-line",
"title":"用户管理",
"menu_id":"13"
},
"name":"user_manage",
"id":"13"
},
{
"path":"menu",
"component":"system_manage/menu/menu.vue",
"parent_id":"12",
"meta":{
"icon":"ri-menu-4-line",
"title":"菜单管理",
"menu_id":"14"
},
"name":"menu_manage",
"id":"14"
},
{
"redirect":"",
"path":"role_manage",
"component":"system_manage/role/role.vue",
"parent_id":"12",
"meta":{
"icon":"ri-user-settings-line",
"title":"角色管理",
"menu_id":"caefef0d-e3a7-4ca7-a73a-98b607f07a83"
},
"name":"role_manage",
"id":"caefef0d-e3a7-4ca7-a73a-98b607f07a83"
}
],
"parent_id":"11",
"meta":{
"icon":"ri-settings-4-line",
"title":"系统管理",
"menu_id":"12"
},
"name":"multilevelMenuExample",
"id":"12"
}
],
"meta":{
"icon":"ri-node-tree",
"title":"根目录",
"menu_id":"11"
},
"id":"11"
}
],
"code":0
}
当然这样还不够，我们需要对数据中的component字段进行改造，在这里我写了一个递归函数eachMenu
const eachMenu = async data => {
data.forEach(item => {
if (item.children)
eachMenu(item.children)
if (item.component) {
if (item.component && item.component === 'layout')
item.component = () => import(/* layout */ '@/layout')
else {
const path = item.component
item.component = resolve => require([`@/views/${path}`], resolve)
}
}
})
return data
}
前端方面的角色路由的权限已经完成
演示如下：
GIF.gif
