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

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

效果演示

演示地址：https://www.pmdaniu.com/storage/118612/664ed2100b4a9d341a9d2828d35021d2-69620/start.html

1. 角色管理

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

1.1创建角色

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

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

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

1.2选择角色成员

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

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

1.3选择角色权限

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

1.4模糊搜索角色

1.5启用和禁用

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

1.6删除角色

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

1.7查看角色详细信息

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

1.8批量操作

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

2. 用户管理

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

2.1创建用户

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

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

2.2选择用户角色

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

2.3选择用户权限

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

2.4模糊搜索用户

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

2.5启用和禁用

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

2.6删除用户

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

2.7查看用户详细信息

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

2.8编辑用户信息

2.9重置密码

2.10批量操作

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

3. 权限管理

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

3.1添加权限策略

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

可以手动添加系统服务。

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

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

3.2维护权限策略

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

3.3批量授权

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

3.4删除和批量删除

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