fantastic-admin-pro-vue 路由动态改造前端
作者提供了一套简洁好用的前端框架,但对于后台个人开发者想要真正的用起来,加入角色权限的功能,动态路由就必须要改造,对于这一块作者已经帮我们实现了太多的东西,我们只需要做一些小小的改动便可实现该功能。
下面是我的实现过程
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
作者:夏天的榴莲
链接:https://www.jianshu.com/p/44a3770e31eb
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。