【Axure教程】通用权限管理原型

简介: 【Axure教程】通用权限管理原型

Hello大家好,权限管理可以说是每个系统都必备的一个功能,也有可能是一个权限系统管理同一个企业多个系统的用户权限。所以作者今天和大家分享一个权限管理系统的高保真原型及制作教程。

这个原型包括了角色管理、用户管理和权限管理共计17个页面内容。而且大部分内容是用中继器完成的,使用方便,只需要填写表格即可。当然了,这个原型交互效果和真的一样,你们也可以学到几个中继器之间的交互。

【原型预览】

用电脑点击左下方阅读原文或复制打开下面的原型预览地址

https://axhub.im/pro/34cea0d26344c9bb/#g=1

【原型下载】

方式2:https://weidian.com/item.html?itemID=3596483091

【原型效果】

1. 角色管理

角色管理应包括角色名称、说明、状态、成员和权限

1.1创建角色

创建角色只需要简单的填写名称和说明即可,默认启用状态。

这里注意角色名是唯一的。

640.gif

添加角色后,可以在用户管理和权限管理处看到该角色

640.gif

1.2选择角色成员

新增角色后,可以为该角色快速选择用户,可以高效管理相同角色用户的权限。

640.gif

在角色管理页维护角色用户后,联动到角色详情页、用户管理和用户详细页,可以看到该用户已经选中该角色。

640.gif

1.3选择角色权限

640.gif

同样,在角色管理页维护角色权限后,联动到角色详情页和权限管理页面,都可以看到该用户选中的权限。

640.gif

1.4模糊搜索角色

7de773e6f422786eeadf969a280562fe.jpg

1.5启用和禁用

启用或禁用后,同样可以在角色详情页显示同样状态

50a08a137a0db22a629ade6548ab8b95.jpg

1.6删除角色

可以在角色管理页或者角色详细页删除角色。如果在详细页删除,会联动至角色管理页。

1f24f2471906bf606b00d6f1508d0b35.jpg

1.7查看角色详细信息

点击角色名称可以查看不同角色的详细信息

813e43975f8423b4945a0f7c8fd42061.jpg

1.8批量操作

同样的也会联动交互至其他页面,大家可以自行体验。

e9b2922fceffaecad552f82fc1fe7200.jpg

2. 用户管理

用户管理应包括角色账号、基本信息、状态、角色和权限。

2.1创建用户

创建用户包括账号,用户名,手机号码,邮箱,输入框等,提交时系统能进行判断,如果输入不正确会有相应的提示。同样,添加用户后,也会联动至角色管理、角色详情、权限管理等页面,大家可以自己体验。

注:用户账号是唯一的,但是用户名不唯一,毕竟人有同名

71d5fefad23d4daf01d9b6f8364df275.jpg

2.2选择用户角色

选择用户角色后,也会联动至角色管理、角色详情、权限管理等页面,大家可以自己体验。

f18f388eecbb8926d52763ab3402e6cd.jpg

2.3选择用户权限

如果需要单独设置该角色的某项权限,也可以在这里进行设置。

241bf0fa826ea389a6c66d9182ed0a60.jpg

2.4模糊搜索用户

输入用户账号或名称,可以模糊搜索用户

2f1ac112449f4d1c43c04501ef8ccf11.jpg

2.5启用和禁用

同样的启用或禁用后,能联动到用户详细页

982747d26632131548fb936cda938016.jpg

2.6删除用户

可以在用户管理页或者用户详细页删除角色。如果在详细页删除,会联动至用户管理页。

e6394d78c81214366cc6e7644d2abfbd.jpg

2.7查看用户详细信息

点击角色名称可以查看不同用户的详细信息

737ebbbb3f72318b1be565363e3d6d52.jpg

2.8编辑用户信息

2cd7f5d5ef49c7b1e50b3c7c179adca9.jpg

2.9重置密码

529bbbbb0fb777fc68313b5e27aee518.jpg

2.10批量操作

和上面一样,也会联动交互至其他页面,大家可以自行体验。

84eb07e46404101eb3aecf305b833bcb.jpg

3. 权限管理

权限管理应包括权限策略管理和授权

3.1添加权限策略

可以通过可视化配置和脚本配置两种方式添加权限策略。

可以手动添加系统服务。

可以设置操作权限和资源权限。

同样新增权限策略后,联动交互到用户和角色管理,大家可以自己体验

810b547af859c8464a301fe4612b5c91.jpg

3.2维护权限策略

维护权限策略后,联动交互到用户和角色管理,大家可以自己体验

f9f4184f1d934667ea3d040b43efc2ca.jpg

3.3批量授权

授权后联动至用户和角色管理,大家可以自己体验

e5069a8fdc99289b358911f084472c2b.jpg

3.4删除和批量删除

删除权限策略后联动至用户和角色管理,大家可以自己体验

58e4be8045a7a90998dfeb30c338b34e.png

二、教程思路

1. 角色管理

什么是角色管理呢?

例如说运营专员是一个角色,运营经理又是一个角色,角色与角色质之间有的权限是不一样的,就好比运营经理会比运营专员的权限大。但是一个角色会有多个人,比如说一家银行可能就有几千个大堂经理了。而这些大堂经理有很大一部分权限是一致的,角色管理就是管理这一致的权限。

186da6d0ffadc3742c3e1b05bd038138.png

1.1 制作材料

添加角色按钮一个,搜索框一个,刷新按钮一个,中继器一个包含:多选按钮,角色名称,角色状态(启用按钮),角色成员、角色权限、删除按钮,以及批量启用、禁用、删除按钮。

1.2 角色中继器内表格

如下图所示:

no:编号,按1、2、3、4、5、6、7的方式即可,载入时,按no升序排列

groupname:角色名,每项加载时,设置角色名文本=Item.groupname

groupremark:角色说明,每项加载时,设置角色说明=Item.groupremark

qiyong:每项加载时,如果item.qiyong=1,设置启用按钮状态为启用,否则则设置为未启用

xuanzhong:每项加载时,如果item.xuanzhong=1,设置改行选择按钮为选中状态,否则则为未选中状态。

d37b3be7d0285ec731481bfac6d77d46.png

2. 用户管理

用户管理应包括角色账号、基本信息、状态、角色和权限、密码重置等功能。

有的小朋友可能会问,为什么,角色那里可以选择用户,还要在用户这里选择角色呢?因为方便!现在很多都是一个人承担多个角色的,那如果我新增一个用户,我可能在角色页操作多次,那如果我在用户页就可以选择角色,那就只需要操作一次了。

还有的同学可能会问,为什么用户要有自己的权限,用角色的不行吗?刚刚提到了,角色是管理共性的权限,但是,即使是同一角色,例如大家都是大堂经理,在不同的网点,也会有自己私有的权限,所以用户管理就可以维护用户的私有权限。

cd91cdcb5dd302e5f9021802b8a6f8c4.png

2.1 制作材料

添加用户按钮一个,搜索框一个,刷新按钮一个,中继器一个包含:多选按钮,用户账号,用户名称、启用按钮,角色选择、权限设置、删除按钮,以及批量启用、禁用、删除按钮。

2.2 用户中继器内表格

如下图所示:

no:编号,按1、2、3、4、5、6、7的方式即可,载入时,按no升序排列

useraccount:用户账号,每项加载时,设置角色名文本=Item.useraccount

username:用户名称,每项加载时,设置用户名称=Item.username

telephone:手机号码,用语记录用户的手机号码

email:电子邮箱,用于记录用户的电子邮箱

qiyong:每项加载时,如果item.qiyong=1,设置启用按钮状态为启用,否则则设置为未启用

xuanzhong:每项加载时,如果item.xuanzhong=1,设置改行选择按钮为选中状态,否则则为未选中状态

a8817f4e948bbd1dd58fa156646f9d13.png

3. 权限管理

权限管理应包括权限策略管理和授权。

那为什么在这里要批量授权呢,例如说某个系统新增了一个功能,那如果这里没有批量授权的话,我就要找到n个角色,n个用户一个个进行授权了。

3.1 制作材料

添加策略按钮一个,搜索框一个,刷新按钮一个,中继器一个包含:多选按钮,权限名称,权限说明角、批量授权、编辑策略、删除策略,以及批量删除按钮。

3.2 权限中继器内表格

如下图所示:

no:编号,按1、2、3、4、5、6、7的方式即可,载入时,按no升序排列

quanxianname:权限策略,每项加载时,设置权限名文本=Item.quanxianname

quanxianshuoming:权限说明,每项加载时,设置角色说明=Item.quanxianshuoming

peizhimoshi:权限的配置模式:可视化配置或脚本配置

chanpinfuwu:这个是设置fuwuquanxian

caozuoquanxian:只读、操作或者其他权限

ziyuanquanxian:设置资源的权限,如邮件、消息等。

xuanzhong:每项加载时,如果item.xuanzhong=1,设置改行选择按钮为选中状态,否则则为未选中状态

0b17f63b6295ee51c30a08b6e79c7f1c.png

那以上就是本期教程的全部内容了,感谢您的阅读,我们下期见,88~

作者:梓贤vigo;


微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容


本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载

相关文章
|
iOS开发 MacOS Python
在Mac 上搭建Pygame开发环境(含安装错误的解决办法)
在Mac 上搭建Pygame开发环境(含安装错误的解决办法)
1484 0
|
JavaScript 前端开发
使用typora生成时序图
掌握生产力工具,使用typora和mermaid生成时序图
1074 0
|
3月前
|
关系型数据库 API 调度
任务的权限隔离与多租户(SaaS)平台设计要点
本文介绍了一个多租户平台的构建,旨在解决权限隔离和数据独立性问题。平台采用FastAPI、Celery+Redis、PostgreSQL多schema、Requests+代理IP和JWT+RBAC技术,实现了任务隔离、代理独立和数据分区。项目强调了多租户系统在任务独立、代理隔离、数据分区和权限控制方面的复杂性,并提出了进一步扩展
357 3
|
4月前
|
安全 数据安全/隐私保护
Dataphin功能Tips系列(73)Dataphin行级权限:构建灵活高效的权限管理体系
Dataphin行级权限通过“控制字段”实现精细化数据管控,有效避免传统字段权限过度开放带来的安全风险,提升权限管理效率与灵活性,满足复杂场景下的数据安全需求。
221 4
|
6月前
|
前端开发 JavaScript API
深度剖析epub reader for mac:原理、兼容性与工程实现全解读
数字内容正重塑阅读方式,而EPUB作为开放电子书标准,在Mac平台的体验却参差不齐。本文从工程师视角解析EPUB文件结构、渲染机制与跨平台兼容难题,探讨为何同一EPUB文件在不同阅读器中呈现效果迥异,涉及字体、排版、目录、多媒体支持等技术细节,并结合用户反馈与开发实践,揭示提升EPUB阅读体验的关键路径。
411 0
|
安全 物联网 API
API技术之身份认证
【10月更文挑战第17天】身份认证是API安全的核心,确保API可信可控。
API技术之身份认证
|
JSON API 开发者
GET方式请求速卖通平台API 接口:商品列表数据获取指南
速卖通商品列表数据接口(如 `aliexpress.item_search`)让开发者获取商品信息列表, 包括名称、价格等关键数据。接口支持按关键词、分类ID等条件获取商品列表及详细信息, 并可通过分页与排序优化展示效果。开发者需在速卖通开放平台注册并创建应用获取API密钥, 构建HTTP请求并处理JSON响应数据。[体验API](http://b.mrw.so/2Pv6Qu)。
|
安全 程序员 数据安全/隐私保护
终于有篇文章把后管权限系统设计讲清楚了
【2月更文挑战第1天】在常用的后台管理系统中,通常都会有权限系统设计,以用于给对应人员分配不同权限,控制其对后管系统中的某些菜单、按钮以及列表数据的可见性。
1027 2
终于有篇文章把后管权限系统设计讲清楚了
|
Shell
SqlServer旁门左道之启动报错(cannot find one or more components.Please reinstall the application。)终极解决方案
SqlServer旁门左道之启动报错(cannot find one or more components.Please reinstall the application。)终极解决方案
861 0
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
856 1