Vue-role v0.1.0 发布,Vue 可视化权限管理组件

栏目: 软件资讯 · 发布时间: 6年前

内容简介:vue-role 项目介绍 Vue-role v0.1.0 正式发布,Vue-role 是基于 Vue 的可视化权限管理库,让开发定义权限简单,让非技术人员分配权限更简单,和传统的树形权限结构说 no V0.1.0功能 1.任何 ctr+/ 一键开启权限编辑模式...

vue-role

项目介绍

Vue-role v0.1.0 正式发布,Vue-role 是基于 Vue 的可视化权限管理库,让开发定义权限简单,让非技术人员分配权限更简单,和传统的树形权限结构说 no

V0.1.0功能

1.任何 ctr+/ 一键开启权限编辑模式

2.支持对页面的按钮, div 等任何可视化组件进行定义权限

3.支持对当前页面定义权限

4.支持模拟不同权限查看访问效果

有图有真像

Vue-role v0.1.0 发布,Vue 可视化权限管理组件Vue-role v0.1.0 发布,Vue 可视化权限管理组件

Vue-role v0.1.0 发布,Vue 可视化权限管理组件

颜色说明 红色已非配过权限; 绿色没分配过权限,任何人可查看; 黄色没分配过权限,只有超管可查看

在线体验

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

方法

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

 

 


【声明】文章转载自:开源中国社区 [http://www.oschina.net]


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web之困:现代Web应用安全指南

Web之困:现代Web应用安全指南

(美)Michal Zalewski / 朱筱丹 / 机械工业出版社 / 2013-10 / 69

《web之困:现代web应用安全指南》在web安全领域有“圣经”的美誉,在世界范围内被安全工作者和web从业人员广为称道,由来自google chrome浏览器团队的世界顶级黑客、国际一流安全专家撰写,是目前唯一深度探索现代web浏览器安全技术的专著。本书从浏览器设计的角度切入,以探讨浏览器的各主要特性和由此衍生出来的各种安全相关问题为主线,深入剖析了现代web浏览器的技术原理、安全机制和设计上的......一起来看看 《Web之困:现代Web应用安全指南》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器