Vue-role是基于Vue的可视化权限管理库,让开发定义权限简单,让非技术人员分配权限更简单
使用说明按ctr+/开启权限管理模式,所有可定义权限的位置都会出现(红,绿,黄)点,点击点点分配权限,右上角的红点可以定义当前页面(路由)的访问权限,右上角可以模拟某个角色查看他的可访问视图
有图有真像颜色说明红色已非配过权限;绿色没分配过权限,任何人可查看;黄色没分配过权限,只有超管可查看
在线体验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.$ff标明如果不设定权限,只有超管可以查看,没有f标明如果不设定权限,只有超管可以查看,没有f标明如果不设定权限,任何人都可以查看v-role:a.b.$h$h标明编辑模式下不显示可编辑权限的点点方法指令说明VueRole.config(config)设置配置项VueRole.onRoleEdit(function(action,roles,close))监听编辑事件注意使用close()关闭编辑框VueRole.onPageNoRole(function())监听如果当前页面没有权限访问的处理默认为弹框(alert),并后退
评论