Vue-role基于 Vue 的可视化权限管理组件

联合创作 · 2023-09-19 16:29

项目介绍

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标明如果不设定权限,只有超管可以查看,没有f标明 如果不设定权限,任何人都可以查看
v-role:a.b.$h $h 标明 编辑模式下 不显示 可编辑权限的点点

方法

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

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐