需求

需要根据不同的角色来显示不同的菜单

问题

系统是前后分离模式开发的，出现了后端接口和前端路由都需要权限管理。

思路

• 后端的接口肯定得验证权限
• 在前端做好组件名和组件的映射
• 前端的路由通过后端发回的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);