fantastic-admin-pro-vue 路由动态改造前端（一）

作者提供了一套简洁好用的前端框架，但对于后台个人开发者想要真正的用起来，加入角色权限的功能，动态路由就必须要改造，对于这一块作者已经帮我们实现了太多的东西，我们只需要做一些小小的改动便可实现该功能。

下面是我的实现过程

1.首先左侧的菜单是我们想要改造的

/**
 * 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
}

前端方面的角色路由的权限已经完成
演示如下：