iview admin動(dòng)態(tài)路由、權(quán)限控制個(gè)人見解

LeanCloud 發(fā)布于2019-08-23 18:25 / 3479人閱讀

摘要：目前是沒有給我處理好權(quán)限這塊的邏輯。我們的項(xiàng)目正常是路由是在本地配置好的一個(gè)路由文件，所以，要想實(shí)現(xiàn)動(dòng)態(tài)的路由，我們就必須讓實(shí)現(xiàn)動(dòng)態(tài)生成。具體頁面上的按鈕權(quán)限的分配在前端頁面是怎么控制的，完全可以去里借鑒。

iview admin目前是沒有給我處理好權(quán)限這塊的邏輯。所以，權(quán)限這塊還是得我們自己去擼。（臉上笑嘻嘻、心里mmp！)

思路

做權(quán)限，說到底就是為了讓不同權(quán)限的用戶，可以訪問不同的功能模塊。比如我是admin權(quán)限，我就可以為所欲為了，你服不服？？？那我如果是只有某個(gè)權(quán)限，可能我只能使用某一個(gè)或者某幾個(gè)功能（也就是前端頁面）。頁面內(nèi)的具體功能也是一樣的道理，舉個(gè)栗子：我是admin權(quán)限，我可以對(duì)某個(gè)表格進(jìn)行：增、刪、改、查、上傳等一系列操作。如果我不是，可能就收到權(quán)限的限制，只能進(jìn)行查看和上傳，其他的功能是無權(quán)限進(jìn)行操作的。好了，大概的思路就是這樣的，光BB誰不會(huì)啊；那具體看一下基于iview admin的權(quán)限是如何實(shí)現(xiàn)。

具體實(shí)現(xiàn)邏輯

我們從上面的思路具體分析一下，首先，不同用戶可以訪問不同的模塊（頁面），所以我們要做到不同身份的用戶進(jìn)入系統(tǒng)的時(shí)候，就會(huì)根據(jù)這個(gè)用戶的身份顯示不同的頁面，顯示不同的菜單。我們的項(xiàng)目正常是路由（router.js）是在本地配置好的一個(gè)路由文件，所以，要想實(shí)現(xiàn)動(dòng)態(tài)的路由，我們就必須讓router.js實(shí)現(xiàn)動(dòng)態(tài)生成。我選用的方案是vue-router 2.2版本新增了一個(gè)router.addRoutes(routes)方法去實(shí)現(xiàn)。（可能還有一些“巨佬”是用的其他方案，"佩服三連"）。那用了addRouter方法之后呢，實(shí)際上我們本地的router.js是只需要一些基本的路由了，其他都可以刪掉了。感覺有點(diǎn)啰嗦了，我先貼代碼壓壓驚吧。

import Main from "@/components/main"
/**
 * iview-admin中meta除了原生參數(shù)外可配置的參數(shù):
 * meta: {
 *  title: { String|Number|Function }
 *         顯示在側(cè)邊欄、面包屑和標(biāo)簽欄的文字
 *         使用"{{ 多語言字段 }}"形式結(jié)合多語言使用，例子看多語言的路由配置;
 *         可以傳入一個(gè)回調(diào)函數(shù)，參數(shù)是當(dāng)前路由對(duì)象，例子看動(dòng)態(tài)路由和帶參路由
 *  hideInBread: (false) 設(shè)為true后此級(jí)路由將不會(huì)出現(xiàn)在面包屑中，示例看QQ群路由配置
 *  hideInMenu: (false) 設(shè)為true后在左側(cè)菜單不會(huì)顯示該頁面選項(xiàng)
 *  notCache: (false) 設(shè)為true后頁面在切換標(biāo)簽后不會(huì)緩存，如果需要緩存，無需設(shè)置這個(gè)字段，而且需要設(shè)置頁面組件name屬性和路由配置的name一致
 *  access: (null) 可訪問該頁面的權(quán)限數(shù)組，當(dāng)前路由設(shè)置的權(quán)限會(huì)影響子路由
 *  icon: (-) 該頁面在左側(cè)菜單、面包屑和標(biāo)簽導(dǎo)航處顯示的圖標(biāo)，如果是自定義圖標(biāo)，需要在圖標(biāo)名稱前加下劃線"_"
 *  beforeCloseName: (-) 設(shè)置該字段，則在關(guān)閉當(dāng)前tab頁時(shí)會(huì)去"@/router/before-close.js"里尋找該字段名對(duì)應(yīng)的方法，作為關(guān)閉前的鉤子函數(shù)
 * }
 */

var Router = [{
        path: "/",
        name: "_home",
        redirect: "/home",
        component: Main,
        meta: {
            icon: "md-home",
            title: "首頁",
            hideInMenu: true
        },
        children: [{
            path: "/home",
            name: "home",
            meta: {
                icon: "md-home",
                title: "首頁"
            },
            component: () => import("@/view/home/home.vue")
        }]
    },
    {
        path: "/401",
        name: "error_401",
        meta: {
            hideInMenu: true
        },
        component: () => import("@/view/error-page/401.vue")
    },
    {
        path: "/500",
        name: "error_500",
        meta: {
            hideInMenu: true
        },
        component: () => import("@/view/error-page/500.vue")
    },
    {
        path: "*",
        name: "error_404",
        meta: {
            hideInMenu: true
        },
        component: () => import("@/view/error-page/404.vue")
    }
]

export default Router
吶~ 我本地路由文件只留下了這些基本的路由，！！！那我其他的路由怎么辦？？--- 不慌，具體的業(yè)務(wù)路由代碼先不用管，交給addRouter這位兄dei和你們后端的兄dei就好了。你要做的就是拿到后端給你返回的list，然后用addRouter方法添加到router里就好了。
接下來，你把你之前的路由文件原封不動(dòng)的ctrl+c給后端的兄dei，就是你刪除掉的那些路由，這里說明一下：（list的格式必須和router.js里的格式一致，可以和后端兄弟商量一下了，讓他幫你把格式造好直接返給你。）
接下來進(jìn)入關(guān)鍵的一步了，終于又可以貼代碼了！！！
在vuex的app.js我定義了一個(gè)獲取router文件的方法：

    getUserRouters({
            commit
        }) {
            const code = getParams(window.location.href).code
            return new Promise((resolve, reject) => {
                try {
                    callBack(code).then(res => {
                        let routers = backendMenusToRouters(res.data.resultData.route)
                        commit("setRouters", routers)
                        setToken(res.data.resultData.token)
                        localSave("dataMenuList",JSON.stringify(res.data.resultData.route))
                        resolve(res.data.resultData.route)
                    }).catch(err => {
                        reject(err)
                    })
                } catch (error) {
                    reject(error)
                }
            })
        }

ok，我為什么沒有用iview admin的登陸邏輯呢，是因?yàn)槲覀冞@邊的登陸會(huì)走一個(gè)平臺(tái)的驗(yàn)證，公司統(tǒng)一的，其實(shí)和iview admin的差不多的。---- 上面的函數(shù)里，我在本地存了一下路由的文件，后面會(huì)用到。

成功拿到路由文件之后，我們就可以再main.js里讓addRouter兄dei登場(chǎng)了。代碼：

    const token = getToken()
    const queryCode = getParams(window.location.href).code
    if (!token && !queryCode) {
        //調(diào)登陸邏輯
    } else if (!token && queryCode) {
       //調(diào)用app.js里的getUserRouters方法
        store.dispatch("getUserRouters").then(res => {
            new Vue({
                el: "#app",
                router,
                i18n,
                store,
                render: h => h(App),
                mounted() {
                    const routers = backendMenusToRouters(res)
                    router.addRoutes(routers)
                },
            })
        }) 
    } else {
        //如果是登陸過的，后者是正常刷新操作，只要從localStorage里拿數(shù)據(jù)就好了
        router.addRoutes(backendMenusToRouters(JSON.parse(localRead("dataMenuList"))))
        new Vue({
            el: "#app",
            router,
            i18n,
            store,
            render: h => h(App)
        })
    }

上面的backendMenusToRouters函數(shù)我貼出來，這個(gè)函數(shù)就是為了處理路由文件的，路由掛載component是一個(gè)函數(shù)，所以需要特殊處理。

    /**
 * @description 將后端菜單樹轉(zhuǎn)換為路由樹
 * @param {Array} menus
 * @returns {Array}
 */
export const backendMenusToRouters = (menus) => {
    let routers = []
    forEach(menus, (menu) => {
        // 將后端數(shù)據(jù)轉(zhuǎn)換成路由數(shù)據(jù)
        let route = backendMenuToRoute(menu)
        // 如果后端數(shù)據(jù)有下級(jí)，則遞歸處理下級(jí)
        if (menu.children && menu.children.length !== 0) {
            route.children = backendMenusToRouters(menu.children)
        }
        routers.push(route)
    })
    return routers
}

/**
 * @description 將后端菜單轉(zhuǎn)換為路由
 * @param {Object} menu
 * @returns {Object}
 */
const backendMenuToRoute = (menu) => {
    // 具體內(nèi)容根據(jù)自己的數(shù)據(jù)結(jié)構(gòu)來定，這里需要注意的一點(diǎn)是
    // 原先routers寫法是component: () => import("@/view/error-page/404.vue")
    // 經(jīng)過json數(shù)據(jù)轉(zhuǎn)換，這里會(huì)丟失，所以需要按照上面提過的做轉(zhuǎn)換，下面只寫了核心點(diǎn)，其他自行處理
    let route = Object.assign({}, menu)
    route.component = resolve => require([`@/${menu.component}`], resolve)
    return route
}

關(guān)于處理component需要配置個(gè)依賴：
npm install babel-plugin-syntax-dynamic-import

.babelrc 增加
{
"plugins": ["syntax-dynamic-import"]
}

這里加一句，vuex里app.js的menuList方法需做稍稍的小改動(dòng)：

    
     menuList: (state, getters, rootState) => getMenuByRouter(state.routers, rootState.user.access)

main.vue的menuList賦值：

    menuList( ) {
            return this.$store.getters.menuList
        },

到這里，你的動(dòng)態(tài)路由可以說已經(jīng)完成了。

那又有同學(xué)問了，那還有一些頁面是子頁面，不需要在菜單里顯示怎么處理？？？別慌，我喝口水慢慢跟你說。
我們可以看一下路由的配置，在meta的對(duì)象里，有個(gè)hideInMenu屬性，妥了，那我們搞起來吧。其實(shí)iview admin已經(jīng)幫我寫好了這塊的邏輯處理，代碼在util.js里：

    /**
 * @param {Array} list 通過路由列表得到菜單列表
 * @returns {Array}
 */
export const getMenuByRouter = (list, access) => {
    let res = []
    forEach(list, item => {
        if (!item.meta || (item.meta && !item.meta.hideInMenu)) {
            let obj = {
                icon: (item.meta && item.meta.icon) || "",
                name: item.name,
                meta: item.meta
            }
            if ((hasChild(item) || (item.meta && item.meta.showAlways))) {
                obj.children = getMenuByRouter(item.children, access)
            }
            if (item.meta && item.meta.href) obj.href = item.meta.href
            // if (showThisMenuEle(item, access)) res.push(obj)
            res.push(obj)
        }
    })
    return res
}

-，- ok，大功告成！慢著... 那如果我想對(duì)菜單進(jìn)行增刪改操作怎么辦？？
好辦！你就前端寫頁面吧，這里我推薦一個(gè)很成熟的方案，我目前項(xiàng)目就是參考他的做的。傳送門：xBoot管理系統(tǒng)

個(gè)人認(rèn)為他們的菜單管理做的真的很棒！！我又不要臉的借鑒了他們的功能權(quán)限，進(jìn)行了我們項(xiàng)目的功能權(quán)限管理的設(shè)計(jì)。

具體實(shí)現(xiàn)邏輯

首先，每個(gè)角色的具體功能權(quán)限是在meta的access里攜帶進(jìn)來的，access是一個(gè)數(shù)組，["del","add"....]我和后端定義好了每個(gè)字段代表什么功能權(quán)限。比如："del"代表刪除按鈕、"upload"代表上傳功能等等... 當(dāng)我們進(jìn)入不同的頁面的時(shí)候，根據(jù)access的功能列表給用戶設(shè)置不同的功能權(quán)限。這里是借鑒了網(wǎng)上的實(shí)現(xiàn)邏輯，自定義一個(gè)指令，然后每個(gè)按鈕根據(jù)功能綁定不同的字段，做是否remove動(dòng)作。好了，又開始bb了，貼代碼吧，在libs定義一個(gè)hasPermission.js文件：

    const hasPermission = {
    install (Vue, options) {
        Vue.directive("hasPermission", {
            inserted (el, binding, vnode) {
                let permissionList = vnode.context.$route.meta.access;
                if (!permissionList.includes(binding.value)) {
                    el.remove()
                }
            }
        });
    }
};
export default hasPermission;

在main.js里全局定義：

    import hasPermission from "@/libs/hasPermission.js"
    Vue.use(hasPermission)

頁面中具體按鈕的使用：

注意：綁定的字段必須是字符串格式。
具體頁面上的按鈕權(quán)限的分配在前端頁面是怎么控制的，完全可以去xBoot里借鑒。
我也不知道我寫的大家看不看得懂，如果看不懂，再多看一遍，再看不懂歡迎留言或者加我QQ互相學(xué)習(xí)：602353272。
最后，再BB一句，有巨佬有更好的方案歡迎賜教！