需求
需要根据不同的角色来显示不同的菜单
问题
系统是前后分离模式开发的，出现了后端接口和前端路由都需要权限管理。
思路
- 后端的接口肯定得验证权限
- 前端的路由通过后端发回的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);