本文主要是介绍Vue-role vue 可视化权限管理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
项目介绍
Vue-role v0.1.0 正式发布,Vue-role 是基于 Vue 的可视化权限管理库,让开发定义权限简单,让非技术人员分配权限更简单,和传统的树形权限结构说 no
V0.1.0功能
1.任何 ctr+/ 一键开启权限编辑模式
2.支持对页面的按钮, div 等任何可视化组件进行定义权限
3.支持对当前页面定义权限
4.支持模拟不同权限查看访问效果
有图有真像
颜色说明 红色已非配过权限; 绿色没分配过权限,任何人可查看; 黄色没分配过权限,只有超管可查看
在线体验
https://tengzhinei.gitee.io/vue-role/example/index.html
DEMO 使用了 VUE-RAP 框架; Vue-rap 可以在不使用大量前端工具(如npm,webpack,Browserify等)的情况下快速构建基于Vue的秒速打开边用边下载的流应用(单页面应用)
VUE-RAP 地址:https://gitee.com/tengzhinei/Vue-rap
安装教程
-
引入 vue-role.css文件
-
在 vue 后引入 vue-role.js文件就可以了
开始使用
//权限定义 只需要后台返回编辑过的权限就可以了var roles={'user.add':[1,2],'user.edit':[2,3]}; //配置VueRole.config({role: 1, //当前用户的 权限super_role: 1, //超级用户的权限roles:roles, //权限数据role_names: {'1': '超管', '2': '技术', '3': '小编'}, //权限名称lang:{ //语言包可以为空title:'权限设置',sys_role:'系统设定,不可编辑',f:'不选择,除了超管没有其他角色可以访问',f_not:'不选择,任何角色都可以访问',cancel:'取消',submit:'提交',imitate:'模拟',close:'关闭'}});//权限编辑时保存VueRole.onRoleEdit(function (action, roles, close) {//测试时直接权限直接存在本地缓存 localStorage中localStorage.setItem('vue_role@' + action, JSON.stringify(roles));close();});
API
指令 v-role 说明
| 指令 | 说明 |
|---|---|
| v-role.1.2 | 权限为 1或者 2的可以查看 ,系统设定不可修改 |
| v-role:a | 拥有 (资源)a 的可以查看 |
| v-role:a.b | 拥有 (资源)a.b 的可以查看 |
| v-role:a.b.$f | f标明如果不设定权限,只有超管可以查看,没有f标明如果不设定权限,只有超管可以查看,没有f标明 如果不设定权限,任何人都可以查看 |
| v-role:a.b.$h | $h 标明 编辑模式下 不显示 可编辑权限的点点 |
方法
| 指令 | 说明 |
|---|---|
| VueRole.config(config) | 设置配置项 |
| VueRole.onRoleEdit(function(action, roles, close)) | 监听 编辑事件 注意使用 close() 关闭编辑框 |
| VueRole.onPageNoRole(function()) | 监听 如果当前页面没有权限访问的处理 默认为 弹框(alert),并后退 |
这篇关于Vue-role vue 可视化权限管理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
