项目介绍
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
安装教程
引入 vue-role.css文件
在 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-template是vue-element-admin的一个基础方案，很适合入门使用。 vue-element-admin官网 首先下载下来之后， npm install 在项目主目录运行该命令完成项目依赖的下载 npn run dev 运行这个命令即可完成项目的运行。 下面介绍关于登录部分 自定义登录接口 该项目是通过login进行登录且每一次请求通过info请求进行验证用
-
转自：https://www.jianshu.com/p/c43db18edf67 前言： 最近在开发一个后台管理系统，是基于vue-element-admin进行开发的，在开发过程中感受到该框架的方便同时，也感受到了面对框架所带来的的一些局限性和依赖性。某些问题导致我在开发过程中耽误了很多时间，幸好最后都一一得到解决，所以希望写下这篇文章来进行记录，以便后来的使用。 介绍Vue-element-
-
GitHub Demo 地址 在线预览 前言 1、demo中的项目已经添加了TagsView功能和本地权限控制 关于TagsView功能的添加可以看：Vue - vue-admin-template模板项目改造：增加TagsView功能 关于本地权限控制相关代码参考 vue-admin-template的 permission-control分支 2、并且demo中的项目在1的基础上增加TopHe
-
手把手带你用vue-admin-template实现动态权限管理（一） 前言 最近一直在研究用Vue、Element-Ui搭建一个后台管理系统，于是在github网站上找到 了一个star高居64.3K的项目vue-element-admin。怀着激动的心情赶紧下载下来跑了一下，效果属实不错，还有官方的说明文档网站vue-element-admin。 前期储备 本项目技术栈基于 ES201
-
一、拷贝所需要的文件 将 vue-admin-template\src\layout\components\TagsView 文件夹 vue-admin-template\src\store\modules\tagsView.js 二、修改vue-admin-template\src\layout\components\AppMain.vue <template> <section class
-
前言 最近被逼去搞vue了，这玩意早忘光了，看了下是要搞个类似后台管理项目，看看vue-elemnt-admin学学。 它还有个简易版vue-element-template，看了下缺的东西蛮多，权限路由也没写判断。 Mock vue-element-admin里的mock是nodejs整的服务，甩到了dev-server里。 需要关闭就把before: require('./mock/mock-
-
jfinal是由jfinal2.2+freemarker+easyui写的一个后台管理系统，参考了jty等一些优秀的开源项目，实现了一个基础的后台管理系统。 在线访问：http://moriiy.wicp.net/jfinal/ 有时可能无法访问（毕竟是部署在自己电脑上的），尽量白天访问，进入系统尽量不要做修改或删除操作。 帐号：admin 密码：123456 测试 test 密码123456
-
如果您在声明组件时更喜欢基于类的 API，则可以使用官方维护的vue-class-component装饰器： import Vue from 'vue' import Component from 'vue-class-component' // @Component 修饰符注明了此类为一个 Vue 组件 @Component({ // 所有的组件选项都可以放在这里 template:
-
权限管理 权限管理机制是 hyperledger fabric 项目的一大特色。下面给出使用权限管理的一个应用案例。 启动集群 首先下载相关镜像。 $ docker pull yeasy/hyperledger:latest $ docker tag yeasy/hyperledger:latest hyperledger/fabric-baseimage:latest $ docker pull
-
添加 找到一个你要添加的位置“右击” 在弹出的下拉选项中选择“添加同级”或“添加下级” 在弹出的对话框输入相关信息 路由名称 路由路径，支持 /app/{namespace}/{id:+0~9} 或 /app/:namespace/:id 两种写法 Icon: 如果是菜单填ant.design支持的icon就行 HTTP请求的Method，支持 GET、POST、DELETE、PUT等 是否是菜单
-
细节 一个文件主要包含下列属性，ls -l - rwxrwxrwx user group date filename 111 101 101 归属用户的权限 归属群组的权限 其它用户的权限 归属用户 归属群组 日期信息 文件名称 对于文件夹，必须拥有它的可执行权限，才能够使用 cd 命令进入该文件夹；拥有可读权限，才能够使用 ls 命令查看该文件夹的文件列表。 root用户
-
1. 前言 本节我们将介绍如何使用组件(Component)，组件是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 如何规划和设计组件是学习组件的难点，在编写组件时，我们需要不断思考如何提高组件的可复用性。 2. 慕课解释 组件是可复用的 Vue 实例，且带有一