`

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

安装教程

  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),并后退
分享到:
评论

相关推荐

    vue-admin:vue管理员

    8. **ECharts或Vue-Charts数据可视化**:对于数据展示,ECharts或基于Vue的Vue-Charts提供了丰富的图表组件,用于制作统计图、柱状图、饼图等。 9. **单元测试和集成测试**:为了确保代码质量,Vue-admin项目通常会...

    一个使用 vue3+ antv 构建的 rbac 权限模型-e-admin-vue-ts.zip

    在这个项目中,开发者利用 Vue3 的新特性与 AntV 数据可视化库来创建了一个基于角色的访问控制(Role-Based Access Control)系统,即 RBAC。下面将详细阐述相关知识点。 1. **Vue3**: Vue3 是 Vue.js 框架的最新...

    backstageManagementSystem-:后台管理系统(基于vue-element-admin)

    【标题解析】 "backstageManagementSystem-:后台管理...以上知识点是基于提供的标题、描述和标签推断得出的,实际的后台管理系统可能会包含这些特性和更多的复杂功能,如登录认证、权限验证、数据可视化、任务调度等。

    大学生家教平台.zip

    - 数据可视化:通过图表展示平台运营状况,辅助决策。 这个“大学生家教平台”项目涵盖了Web开发的多个层面,涉及到前端、后端、数据库、安全性、用户体验等多个领域,是学习和实践全栈开发的绝佳案例。开发者需要...

    xadmin-基于Django+vue3的rbac权限管理系统-xadmin-client.zip

    在xadmin-client中,Vue3用于构建用户界面,提供动态交互和数据可视化。 RBAC模型是xadmin-client的核心,它允许管理员为不同的角色分配不同的权限,从而实现精细化的权限控制。角色可以是用户组,每个用户可以属于...

    z442475116-data-project-master_html_农业大数据_vue项目_elementui_实时数据_源

    在这个项目中,系统可能涉及对这些数据的收集、分析、可视化,帮助决策者优化农业生产和管理。 4. **实时数据**:系统能从服务器实时获取数据,这意味着它可能采用了WebSocket或者轮询等技术来实现实时通信。这样的...

    仿大众点评后台管理及前端完整系统.zip

    7. **数据可视化**: - ECharts、Highcharts等图表库,用于展示统计信息,如商家评分分布、订单量趋势等。 8. **异常处理与日志记录**: - 在前后端设置合适的错误捕获和处理机制,保证系统稳定性。 - 日志系统...

    运营后台管理系统(vue3+ts)

    这需要集成第三方数据可视化库,如 ECharts 或 AntV G2Plot,结合 Vue3 的组件化能力,可以创建出动态、交互式的数据展示。 7. **暗黑模式和主题颜色切换**:为了满足不同用户的视觉偏好,系统提供了暗黑模式和主题...

    学生晚归考勤系统源码

    这需要强大的数据处理和分析能力,可能涉及到数据可视化工具,如Echarts或D3.js。 4. **权限控制**:系统需要设置不同的权限级别,例如,学生只能查看自己的考勤记录,而管理员则可以查看所有记录并进行修改。这就...

    这是一个基于 Spring Cloud Vue 实现的后台管理系统框架。支持 RBAC 动态权限、多租户、数据权限、工作流

    这个项目是一个综合性的后台管理系统,基于Spring Cloud和Vue.js技术栈构建,提供了丰富的功能模块,如权限管理、多租户支持、数据权限控制、工作流程等。以下将详细阐述其中涉及的技术点和功能。 首先,Spring ...

    java项目OA流程可视化的研究与实现源码.zip

    Java项目OA流程可视化是现代企业信息化管理中的一个重要组成部分,它主要关注如何将复杂的办公自动化(Office Automation,简称OA)流程以图形化的方式呈现,便于用户理解和操作。在本项目中,我们将深入研究并探讨...

    jeecg-boot-master.zip

    Jeecg-Boot-Master内置了强大的报表生成工具,支持多种数据源,可以快速生成各种复杂报表,并提供了ECharts等图表库,用于数据可视化。 10. **API文档自动化** 使用Swagger进行API文档的自动化生成,方便开发者...

    医院管理项目-------------

    9. **报表与统计**:系统可能提供各类报表和数据分析功能,利用ECharts或其他图表库生成可视化数据,帮助医院管理层做出决策。 10. **测试与部署**:单元测试、集成测试确保代码质量,自动化构建工具如Maven或...

    毕业设计-看板界面投放管理系统-后台管理.zip

    在这个系统中,看板被用作任务和进度的可视化工具,用户可以创建、编辑和移动卡片来代表不同的任务阶段,从而实时追踪项目的进度。 2. **后台管理**:后台管理系统是整个项目的心脏,负责处理用户数据、权限控制、...

    基于学校教师科研成果管理系统

    6. 统计分析:各类成果的数据统计、可视化报表展示。 系统的实施过程通常包括需求分析、系统设计、编码实现、测试调试和后期维护等阶段。在整个过程中,需要遵循敏捷开发的原则,以用户需求为导向,进行迭代式开发...

    通用管理系统系统配置源码.zip

    4. 报表与统计:提供数据可视化和分析功能,可能使用Echarts、Highcharts等图表库,源码涉及数据处理和图表渲染逻辑。 5. 接口集成:通用管理系统往往需要与其他系统交互,如ERP、CRM等,因此会有API设计、调用和...

    科研管理系统源码(项目的申报与审批).zip

    - 科研项目的申报和审批流程可能涉及到复杂的审批环节,因此系统可能使用Activiti或Flowable等工作流引擎,实现流程自动化和可视化。 9. **RESTful API设计**: - 前后端分离的设计可能会使用RESTful API进行通信...

    毕业设计基于d2-admin的毕业设计系统.zip

    5. **权限控制**:d2-admin内置了RBAC(Role-Based Access Control)权限管理,可以实现用户角色和权限的分配,确保不同用户只能访问他们被授权的资源,提高了系统的安全性。 6. **地图集成**:在土地管理中,可能...

    OA管理系统

    - **ELK栈**: Elasticsearch、Logstash和Kibana组合,实现日志收集、分析和可视化。 9. **安全机制** - **HTTPS**: 加密通信,保证数据传输的安全性。 - **CSRF令牌**: 防止跨站请求伪造攻击。 - **XSS防护**: ...

    人力资源管理系统源代码

    数据分析工具如Echarts或Tableau可实现可视化展示。 8. **集成能力**:现代HRMS往往需要与其他企业系统如ERP、CRM集成,以实现数据共享和流程自动化,因此API设计和对接是必不可少的。 9. **安全与合规**:系统...

Global site tag (gtag.js) - Google Analytics