# vue-role

**Repository Path**: openagi/vue-role

## Basic Information

- **Project Name**: vue-role
- **Description**: Vue-role 是基于 Vue 的可视化权限管理库,让开发定义权限简单,让非技术人员分配权限更简单
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 24
- **Created**: 2018-09-29
- **Last Updated**: 2022-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-role

### 项目介绍
*****
Vue-role 是基于 Vue 的可视化权限管理库,让开发定义权限简单,让非技术人员分配权限更简单


###  使用说明
*****
按 ctr+/ 开启权限管理模式,所有可定义权限的位置都会出现(红,绿,黄)点,点击点点分配权限,右上角的红点可以定义当前页面(路由)的访问权限,右上角可以模拟某个角色查看他的可访问视图
###  有图有真像
*****
![](example/libs/imgs/pic.gif)

![](example/libs/imgs/pic1.png)

![](example/libs/imgs/pic2.png)

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



### 在线体验
*****

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](https://gitee.com/tengzhinei/Vue-rap)


### 安装教程
*****
1. 引入 vue-role.css文件
1. 在 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),并后退   |