vue前后分离动态路由和权限管理方案
2024-10-06 01:03:03
需求
需要根据不同的角色来显示不同的菜单
问题
系统是前后分离模式开发的,出现了后端接口和前端路由都需要权限管理。
思路
- 后端的接口肯定得验证权限
- 在前端做好组件名和组件的映射
- 前端的路由通过后端发回的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);
最新文章
- 关于linux下crontab的使用
- Contact项目梳理
- DOM对象与jquery对象有什么不同
- 嵌入式实时操作系统μCOS原理与实践任务控制与时间的解析
- [转]VS2005 Debug时提示";没有找到MSVCR80D.dll";的解决办法
- FPGA控制HC595
- WCF Membership and Role Provider
- browserify.js 的模块加载
- readmine项目管理和缺陷跟踪工具
- ubuntu的常用命令
- javaWeb第一天
- 关于JS正则——你知道多少?
- 51Nod 1632 B君的连通(递归,快速幂)
- UVA - 247 Calling Circles Floyd判圈
- 本地和svn都删除文件导致版本不同的问题
- [物理学与PDEs]第4章第3节 一维反应流体力学方程组 3.2 一维反应流体力学方程组的 Lagrange 形式
- threejs绕轴转,粒子系统,控制器操作等(二)
- hdu1285 确定比赛名次【拓扑排序】
- python爬虫实例--网易云音乐排行榜爬虫
- 前端之jquery基础
热门文章
- 微信公众平台HTTPS方式调用配置免费https服务器
- 【java】解析java类加载与反射机制
- 《JAVA与模式》之中介者模式(转载)
- 虚拟化—Docker解决方案
- 新建MVC3 编译出现 System.Web.Mvc.ModelClientValidationRule
- WPF:“wpf类库项目改为Window应用程序项目”系列问题
- 【转载】mysql配置模板(my-*.cnf)参数详细说明
- Ubuntu 13.04开机亮度调节
- 负载均衡层次结构:LVS Nginx DNS CDN
- Android 开发工具介绍-SDK工具和平台工具