代码拉取完成,页面将自动刷新
同步操作将从 藤之内/vue-role 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
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
//权限定义 只需要后台返回编辑过的权限就可以了
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();
});
指令 | 说明 |
---|---|
v-role.1.2 | 权限为 1或者 2的可以查看 ,系统设定不可修改 |
v-role:a | 拥有 (资源)a 的可以查看 |
v-role:a.b | 拥有 (资源)a.b 的可以查看 |
v-role:a.b.$f | $f 标明 如果不设定权限,只有超管可以查看,没有$f标明 如果不设定权限,任何人都可以查看 |
v-role:a.b.$h | $h 标明 编辑模式下 不显示 可编辑权限的点点 |
指令 | 说明 |
---|---|
VueRole.config(config) | 设置配置项 |
VueRole.onRoleEdit(function(action, roles, close)) | 监听 编辑事件 注意使用 close() 关闭编辑框 |
VueRole.onPageNoRole(function()) | 监听 如果当前页面没有权限访问的处理 默认为 弹框(alert),并后退 |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。