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);
vue前后分离动态路由和权限管理方案的更多相关文章
- vue+iview实现动态路由和权限验证
github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新.为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习. Gith ...
- Vue | 自定义指令和动态路由实现权限控制
功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...
- 基于角色访问控制RBAC权限模型的动态资源访问权限管理实现
RBAC权限模型(Role-Based Access Control) 前面主要介绍了元数据管理和业务数据的处理,通常一个系统都会有多个用户,不同用户具有不同的权限,本文主要介绍基于RBAC动态权限管 ...
- vue后端返回路由表来进行权限管理,加载指定路由结构,不包含则不加载
创建vue项目,配置环境变量,后续需要用到.这里只配置生产环境和开发环境. 项目根目录创建 .env.production 文件 NODE_ENV=production VUE_APP_URL=htt ...
- vue系列之动态路由【原创】
开题 最近用vue来构建了一个小项目,由于项目是以iframe的形式嵌套在别的项目中的,所以对于登录的验证就比较的麻烦,索性后端大佬们基于现在的问题提出了解决的方案,在看到他们的解决方案之前,我先画了 ...
- [草稿]基于 Virtuoso 环境比较便捷的项目文件及权限管理方案
https://www.cnblogs.com/yeungchie/ 假设如下情况: 1 项目名称 Project_01 2 包含 4 名研发用户,user01 和 user02 为前端工程师,use ...
- Laravel5做权限管理
关于权限管理的思考 最近用laravel设计后台,后台需要有个权限管理.权限管理实质上分为两个部分,首先是认证,然后是权限.认证部分非常好做,就是管理员登录,记录session.这个laravel中也 ...
- Nuxt的动态路由及路由校验入门
其实动态路由就是带参数的路由.比如我们现在新闻模块下面有很多新闻详情页,这时候就需要动态路由的帮助了. 新闻详细页面我们在news文件夹下面新建了_id.vue的文件,以下划线为前缀的Vue文件就是动 ...
- 使用Laravel5做权限管理
https://www.imooc.com/article/18250 关于权限管理的思考 最近在用laravel设计后台,后台需要有个权限管理.权限管理实质上分为两个部分,首先是认证,然后是权限.认 ...
随机推荐
- Linux安装ElasticSearch-2.2.0-分词器插件(IK)
1.在gitpub上搜索elasticsearch-analysis,能够看到所有elasticsearch的分词器: 2.安装IK分词器:https://github.com/medcl/elast ...
- centos 为OPENJDK配置JAVA_HOME环境变量,安装MAVEN
1.安装开发者工具包 yum install java--openjdk-devel -y 2.配置环境变量 vim /etc/profile export JAVA_HOME=/usr/lib/jv ...
- IDEA使用笔记(二)——常用快捷键
1:在IDEA上面找到快捷键都是有哪些?如下图所示: 2:导出快捷键的描述文件,打印一份,慢慢看,多使用,慢慢的就记住了 3:我自己在开发中经常使用的IDEA快捷键,主要是导航.查找.编辑相关的,如下 ...
- mvc 使用预置队列类型存储异常对象
using PaiXie.Utils; using System; using System.Collections.Generic; using System.Linq; using System. ...
- 利用AutoSPSourceBuilder和Autospinstaller自动安装SharePoint Server 2013图解教程——Part 1
这是一篇对之前 <利用AutoSPSourceBuilder和Autospinstaller自动安装SharePoint Server 2013图解教程——Part 2>的补充.本篇博客将 ...
- android发送短信代码(短信内容超长处理)
一条短信只可容纳70个中文,所以当短信长度超过70个中文字符时程序就要特殊处理了. 有两种方式: 1.通过sendTextMessage()方法依次发送拆分后的短信,该方式有个弊端就是用户会分条收到短 ...
- [转]IC行业的牛人
转载的: 说来惭愧,我所了解的牛人也只是大学教授,工业界的高手了解的还太少,虽然我对教育界的牛人了解的也不多,但这里也要牢骚几句,论坛上的人好像只是认识Gray,Razavi,Allen,Lee, ...
- jmeter maven自动移动jar包windows 批处理命令
jmeter项目maven文件下面放这.bat 工具,可以把必要的jar包移动到jmeter响应的文件夹下面 rem 本文件放在jmeter 脚本maven项目根目录下面,和pom.xml在同一个文件 ...
- MySQL积累
从csv文件写入mysql表:从/root/failure.csv读取数据写入表d_disk_failure,每行中的每个项用逗号分割,每个项只取用"包含的内容,如果没有"则取全部 ...
- php分享十三:mysql事物
一:事物的隔离级别 1:隔离级别的类型 SQL标准定义了4类隔离级别,包括了一些具体规则,用来限定事务内外的哪些改变是可见的,哪些是不可见的: Read Uncommitted(读取未提交内容) Re ...