vue前后分離動態路由和權限管理方案

需求

需要根據不同的角色來顯示不同的菜單

問題

系統是前后分離模式開發的，出現了后端接口和前端路由都需要權限管理。

思路

• 后端的接口肯定得驗證權限
• 在前端做好組件名和組件的映射
• 前端的路由通過后端發回的json動態生成，對於比較細粒度的可以通過css來控制和隱藏

方案

使用vue-router的router.addRoutes(routes)來動態生成路由。

注意事項

vue-router 是按照路由表里的順序來查找路由的，如果你的404頁面在動態添加的路由前面，則需要把404路由單獨移出來，最后再添加。

示例代碼

const Hello =
{
    template : '<div>哈哈哈</div>'
}

const page404 =
{
    path : '/*',
    name : 'error_404',
    meta :
    {
        title : '404-頁面不存在'
    },
    component : resolve =>
    {
        require(['./views/error_page/404.vue'], resolve);
    }
};

const router = new VueRouter();

//組件名和組件的映射
let comsMap =
{
    "hello" : Hello
}

let resData = '[{"name":"首頁","path":"/index","component":"hello"}]'; //表示從接口返回的數據

function paraseRouter(routerJson, router)
{

    let dynamicRouters = [];

    JSON.parse(routerJson).forEach(r=>{  
       
        dynamicRouters.push(
        {
            path : r['path'],
            component : comsMap[r['component']],
            name : r['name']

        }
        )
    });  

    dynamicRouters.push(page404)

    router.addRoutes(dynamicRouters)

}

paraseRouter(resData,router);