V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
tengzhinei
V2EX  ›  Vue.js

Vue-role: vue 可视化权限管理组件

  •  
  •   tengzhinei · 2018-09-29 15:33:58 +08:00 · 2875 次点击
    这是一个创建于 2008 天前的主题,其中的信息可能已经有所发展或是发生改变。

    vue-role

    项目介绍


    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

    安装教程


    1. 引入 vue-role.css 文件
    2. 在 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 标明 如果不设定权限,任何人都可以查看 | | v-role:a.b.$h |$h 标明 编辑模式下 不显示 可编辑权限的点点 |

    方法

    | 指令 |说明 | |---|---| | VueRole.config(config) |设置配置项 | | VueRole.onRoleEdit(function(action, roles, close)) |监听 编辑事件 注意使用 close() 关闭编辑框 | | VueRole.onPageNoRole(function()) |监听 如果当前页面没有权限访问的处理 默认为 弹框(alert),并后退 |

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3612 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 115ms · UTC 10:28 · PVG 18:28 · LAX 03:28 · JFK 06:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.