vue實(shí)現(xiàn)菜單權(quán)限控制

大家在做后臺(tái)管理系統(tǒng)時(shí)一般都會(huì)涉及到菜單的權(quán)限控制問題。當(dāng)然解決問題的方法無非兩種——前端控制和后端控制。我們公司這邊的產(chǎn)品迭代速度較快，所以我們是從前端控制路由迭代到后端控制路由。下面我會(huì)分別介紹這兩種方法的優(yōu)缺點(diǎn)以及如何實(shí)現(xiàn)（不熟悉vue-router API的同學(xué)可以先去官網(wǎng)看一波API哈）。

我先簡(jiǎn)單說下項(xiàng)目的需求：如下圖所示，有一級(jí)菜單和二級(jí)菜單，然后不同的人登錄進(jìn)去會(huì)展示不同的菜單。


1553351044199.jpg

前端控制路由的思路：將所有的路由映射表都拿到前端來維護(hù)，就是我的router.js里面將所有的菜單path與對(duì)應(yīng)的components全部寫進(jìn)去，后面我會(huì)提到全部寫進(jìn)去的弊端。然后我的左側(cè)菜單寫成一個(gè)組件（sidebar.vue），在這個(gè)組件里寫一份類似這樣的data數(shù)據(jù)，然后通過登錄時(shí)獲取的level值來給data中固定的菜單加hidden，然后前端就根據(jù)hidden展示菜單。

// router.js 偽代碼


const Login = r => require.ensure([],()=>r(require('../page/login/Login.vue')),'login');
const Home = r => require.ensure([],()=>r(require('../page/Home.vue')),'home');
const Forbidden = r => require.ensure([],()=>r(require('../page/403.vue')),'forbidden');
const NotFound = r => require.ensure([],()=>r(require('../page/404.vue')),'notfound');
const Dashboard = r => require.ensure([],()=>r(require('../page/dashboard/Dashboard.vue')),'dashboard');
const SplashScreen = r => require.ensure([],()=>r(require('../page/splashScreen/SplashScreen.vue')),'splashScreen');
const AddSplashScreen = r => require.ensure([],()=>r(require('../page/splashScreen/AddSplashScreen.vue')),'addSplashScreen');

const routes = [
    {
        path: '/',
        redirect: '/login'
    },{
        path: '/login',
        component: Login
    },{
        path: '/404',
        component: NotFound
    },{
        path: '/home',
        component: Home,
        redirect: '/home/splashScreen',
        children: [
            {
                path: '/home/splashScreen',
                component: SplashScreen,
                meta: {
                    title: '國(guó)服李白
                }
            },{
                path: '/home/addSplashScreen',
                component: AddSplashScreen,
                meta: {
                    title: 國(guó)服呂布'
                }
            }
        ]
    }
];

下面是菜單組件的偽代碼

// sidebar.vue
<template>
    <div class="sidebar">
        <el-menu>
            ...
        </el-menu>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                routes: [
                    {
                      index: '1',
                      title: '國(guó)服打野',
                      icon: 'iconfont icon-guanggao',
                      children: [
                        {
                          index: 'splashScreen',
                          title: '李白',
                          children: []
                        }, 
                      ]
                    },
                    {   
                        index: '2', 
                        title: '國(guó)服中單', 
                        icon:'iconfont icon-tuisongguanli-',
                    }
                ]
            }
        },
        methods: {
            getLevel(){
                const level = sessionStorage.getItem('level');
                if(level === '0'){
                    this.routes.forEach(function(value){
                        if(value.title == "國(guó)服上單"){
                            value.hidden = true;
                            value.children.forEach(function(value){
                                if(value.title=="國(guó)服關(guān)羽"){
                                    value.hidden = true;
                                }
                            })
                        }
                    })
                }else if(level === '1'){
                    this.routes.forEach(function(value){
                        value.hidden = true
                        value.children.forEach(function(value){
                            value.hidden = true;
                        })
                    })
                }
            }
        },
        created(){
            this.getLevel();
        }
    }
</script>

雖然說這樣可以實(shí)現(xiàn)權(quán)限功能，但有兩個(gè)問題。

  1. session里存的是level，我們可以打開瀏覽器控制臺(tái)人為控制level，這樣就失去了權(quán)限的意義。

  2. 我們?nèi)绻涀×藀ath，可以直接在瀏覽器網(wǎng)址欄中手動(dòng)輸入path，然后回車就可以看到任何頁面。這也是前端router.js寫死所有路由的弊端。

在這里面前端只是通過后端傳回的level來給router顯示/隱藏，這樣前端維護(hù)整個(gè)路由是比較復(fù)雜的而且是有重大隱患的。

現(xiàn)在呢我們來講講后端控制路由。先從操作流程來說，我們這邊加入了一個(gè)dashboard中間頁，這個(gè)頁面只展示不同level下的一級(jí)路由，通過點(diǎn)擊相應(yīng)的一級(jí)路由進(jìn)到對(duì)應(yīng)的Page頁面，該page頁面也只展示相對(duì)應(yīng)的所有的二級(jí)路由。

image.png

這里面出現(xiàn)了兩個(gè)個(gè)新的概念叫 “動(dòng)態(tài)添加路由”和“導(dǎo)航守衛(wèi)”，就是我前端router.js中只寫所有人可以訪問的路由表，比如login和404頁面等。其他所有的組件資源全部寫到一個(gè)新的components.js文件中，然后通過后端返回的menuData去映射符合components.js中的key，如果有對(duì)應(yīng)的，就把它動(dòng)態(tài)添加到router中，通過addRoutes添加。動(dòng)態(tài)添加路由這個(gè)方法要寫到導(dǎo)航守衛(wèi)beforeEach這個(gè)鉤子函數(shù)中。導(dǎo)航守衛(wèi)的意思是我路由跳轉(zhuǎn)到下個(gè)頁面之前要做些什么。就是說我們登錄后會(huì)跳到dashboard頁面，在進(jìn)到這個(gè)頁面之前我們需要將后端請(qǐng)求回來的menuData進(jìn)行二次封裝，把他根據(jù)權(quán)限返回回來的data與我們前端components.js去做map匹配，將最終的數(shù)據(jù)通過addRoutes來push到我們的路由中，之后才能進(jìn)到我們的dashborad頁面，再通過dashborad頁面進(jìn)到對(duì)應(yīng)的page頁面，就是說我們把所有的權(quán)限控制全在dashboard頁面進(jìn)入之前就做完了。這里面還有一個(gè)小的優(yōu)化的點(diǎn)：當(dāng)我們通過前面說的瀏覽器菜單欄訪問到非權(quán)限頁面或者不存在的頁面時(shí)，需要根據(jù)vue-router中的匹配優(yōu)先級(jí)來最后addRoutes 404和*這個(gè)頁面，這樣就可以直接到達(dá)404頁面而非空頁面。
image.png

// components.js 所有的頁面資源  
const home = () => import('../page/Home.vue');
const splashScreen = () => import('../page/splashScreen/SplashScreen.vue');
const addSplashScreen = () => import('../page/splashScreen/AddSplashScreen.vue');
const editSplashScreen = () => import('../page/splashScreen/EditSplashScreen.vue');

export default {
    home,
    splashScreen,
    addSplashScreen,
    editSplashScreen,
   
};

// router.js 看，只寫通用的頁面是不是很清爽
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const Login = () => import('../page/login/Login.vue');
const Home = () => import('../page/Home.vue');
const Forbidden = () => import('../page/403.vue');
const Dashboard = () => import('../page/dashboard/Dashboard.vue');
const routes = [
    {
        path: '/',
        redirect: '/login'
    },{
        path: '/login',
        component: Login
    },{
        path: '/403',
        component: Forbidden
    },
    {
        path: '/dashboard',
        component: Dashboard,
    },
];
export default new Router({
    mode: 'history',
    routes: routes,
    base: __dirname,
    linkActiveClass: 'link-active'
    
})

// main.js  偽代碼 只保留具體的相關(guān)邏輯
import routeMap from './router/component.js';
const NotFound = () => import('./page/404.vue');
const formatRoutes = function (routes, routeData) {
    if (!routeData) {
        routeData = {
            name: 'home',
            path: '/home',
            // 組件匹配成功的話才可以訪問具體的頁面
            component: routeMap['home'],
            children: [],
        };
    }
    routes.length && routes.forEach(route => {
        if(route.component) {
            route.component = routeMap[route.component];
            routeData.children.push({
                path: route.path,
                name: route.index,
                component: route.component,
                meta: {
                    title: route.title,
                },
            })
        }
        if (route.children && route.children.length) {
            formatRoutes(route.children, routeData);
        }
    });
    return routeData;
};

let isFetchRemote = true;

//使用鉤子函數(shù)對(duì)路由進(jìn)行權(quán)限跳轉(zhuǎn)
router.beforeEach((to, from, next) => {
    const username = sessionStorage.getItem('username');
    if(!username && to.path !== '/login'){
        next({path: '/login'});
    }
    else if (isFetchRemote && to.path !== '/login') {
        ajaxPost('/resourceAPI/getMenuData').then(res =>{
            if (res.status === 200 && res.data.errno === 0) {
                isFetchRemote = false;
                const menuData = res.data.result;
                localStorage.setItem('menudata', JSON.stringify(menuData));
                const routeData = formatRoutes(menuData);
                resourceApp.$router.addRoutes([routeData].concat([
                    {name:'404',path:'/404',component:NotFound},
                    {path:'*',redirect: '/404'}]));
                resourceApp.$router.push({
                    path: to.path,
                    query: to.query
                });
            }
            else {
                isFetchRemote = true;
            }
            next();
        })
        .catch(err => {
            console.log(err);
        });    
    }
    else {
        next();
    }
});


const resourceApp = new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

// menuData請(qǐng)求數(shù)據(jù) 
// 一級(jí)菜單與二級(jí)菜單的區(qū)別是一級(jí)菜單帶有component這個(gè)值，比如下面的短信管理就是只有一級(jí)菜單
{
    "errno": 0, 
    "errmsg": "獲取權(quán)限成功", 
    "result": [
        {
            "index": "1", 
            "title": "打野位置", 
            "icon": "iconfont icon-guanggao", 
            "children": [
                {
                    "index": "splashScreen", 
                    "icon": "", 
                    "title": "娜可露露", 
                    "path": "/home/splashAdverse", 
                    "component": "splashAdverse", 
                    "isShow": true
                }, 
                {
                    "index": "addSplashScreen", 
                    "icon": "", 
                    "title": "李白", 
                    "path": "/home/addAdverse", 
                    "component": "addAdverse", 
                    "isShow": false
                }, 
                
            ]
        }, 
        {
            "index": "message", 
            "title": "國(guó)服上單", 
            "icon": "iconfont icon-duanxinguanli", 
            "path": "/home/message", 
            "component": "message", 
            "children": [
                {
                    "index": "addMessage", 
                    "title": "國(guó)服第一關(guān)羽", 
                    "icon": "", 
                    "path": "/home/addMessage", 
                    "component": "addMessage", 
                    "isShow": false
                }
                
            ]
        } 
    ]
}

而sidebar和dashboard這兩個(gè)組件都只需要通過session拿到后端的menudate就可以。

// dashboard 偽代碼
<template>
    <div class="nav_list">
        <div class="nav_list_item" v-for="item in navList" @click="goPage(item)">
            <i :class="item.icon"></i>
            <h2>{{item.title}}</h2>
        </div>
    </div>                       
</template>

<script>  
    created(){
        const routeArr = JSON.parse(localStorage.getItem('menudata'));
        this.navList = routeArr;
    },  
    methods: {
        goPage(item){
            // 只有一級(jí)菜單
            if(item.component){
                this.$router.push(item.path);
            }else{
                // 二級(jí)菜單的數(shù)據(jù)結(jié)構(gòu)中只在children中有path
                this.$router.push(item.children[0]['path']);
            }
        }
    }
</script>

// sidebar 偽代碼
<script>
    export default {
        data() {
            return {
                routes: [],
            }
        },
        methods: {
            bouncer(arr){
                return arr.filter(function(val){
                  return !(!val || val === "");
                });
            }
        },
        created(){
            const menuData = JSON.parse(localStorage.getItem('menudata'));
            // 通過當(dāng)前router的path來map對(duì)應(yīng)的整個(gè)路由數(shù)組
            let routes = menuData.map((item)=>{

                // 只有一級(jí)路由
                if(item.component && item.path == this.$route.path){
                    console.log(item)
                    return item;
                }else{
                    if(item.children[0]['path'] == this.$route.path){
                        console.log(item)
                        return item;
                    }
                }
            })
            // 去掉數(shù)組中的undefined、null 等空值 假值
            this.routes = this.bouncer(routes);
        }
    }
</script>

通過這種方式來控制權(quán)限，我們?nèi)绻跒g覽器控制臺(tái)改了session中的level或者在瀏覽器導(dǎo)航欄改path，都會(huì)回歸到導(dǎo)航守衛(wèi)中，就是發(fā)請(qǐng)求重新獲取menuData，當(dāng)我addRoutes后如果沒有匹配到這個(gè)值就回到404，當(dāng)然通過改level也不會(huì)達(dá)到修改權(quán)限的控制，因?yàn)槲覀兪莿?dòng)態(tài)獲取路由，不是之前的前端控制路由。

目前為止，我感覺通過后端控制權(quán)限這種實(shí)現(xiàn)方式應(yīng)該是最理想的一種吧，當(dāng)然大家有更好的方法或者對(duì)此文有任何問題，歡迎大家留言哈。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容