权限管理模块设计

1. 模块概述

1.1 模块信息

项目	内容
模块编号	M-003
模块名称	权限管理
模块描述	管理系统角色和权限，包括角色管理、菜单权限分配、操作权限分配、数据权限设置等功能
设计优先级	P0
负责人	UI/UX设计师

1.2 功能清单

功能编号	功能点	优先级	设计状态
F-003-001	角色创建	P0	✓ 已完成
F-003-002	角色编辑	P0	✓ 已完成
F-003-003	角色删除	P0	✓ 已完成
F-003-004	菜单权限分配	P0	✓ 已完成
F-003-005	操作权限分配	P0	✓ 已完成
F-003-006	数据权限设置	P0	✓ 已完成
F-003-007	用户角色分配	P0	✓ 已完成

2. 页面设计

2.1 角色管理页面

2.1.1 页面布局

┌─────────────────────────────────────────────────────────────┐
│  顶部导航栏                                                  │
├──────────────┬──────────────────────────────────────────────┤
│              │  权限管理 > 角色管理                          │
│  侧边菜单    ├──────────────────────────────────────────────┤
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │ 🔍 搜索角色名称...                        │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │ [+ 新建角色]                              │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │ 角色名称 │ 角色编码 │ 数据权限 │ 成员数 │状态│操作│
│              │  ├─────────┼─────────┼─────────┼───────┼────┼────┤
│              │  │超级管理员│ admin   │ 全部    │   2   │启用│编辑│
│              │  │ 管理员   │ manager │ 本部门及子部门│ 10│启用│编辑│
│              │  │ 普通用户 │ user    │ 本人    │  100  │启用│编辑│
│              │  │ ...     │ ...     │ ...     │ ...   │... │... │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
└──────────────┴──────────────────────────────────────────────┘

2.1.2 功能说明

搜索区域

支持按角色名称模糊搜索
实时搜索，无需回车

操作区域

新建角色：打开角色创建弹窗

表格区域

显示角色基本信息
显示数据权限范围
显示角色成员数量
支持编辑和权限配置

2.2 角色创建/编辑弹窗

2.2.1 弹窗布局

┌─────────────────────────────────────────┐
│  新建角色                     [X]       │
├─────────────────────────────────────────┤
│                                         │
│  基本信息                                │
│  ─────────────────────────────────────  │
│                                         │
│  角色名称 *                              │
│  ┌─────────────────────────────────┐   │
│  │ 请输入角色名称                   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  角色编码 *                              │
│  ┌─────────────────────────────────┐   │
│  │ 请输入角色编码                   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  角色描述                                │
│  ┌─────────────────────────────────┐   │
│  │                                 │   │
│  │                                 │   │
│  └─────────────────────────────────┘   │
│                                         │
│  数据权限 *                              │
│  ○ 全部数据                              │
│  ○ 本部门及子部门数据                     │
│  ○ 本部门数据                            │
│  ○ 仅本人数据                            │
│  ○ 自定义                                │
│                                         │
│  ┌──────────────┐  ┌──────────────┐    │
│  │    取 消     │  │    确 定     │    │
│  └──────────────┘  └──────────────┘    │
│                                         │
└─────────────────────────────────────────┘

2.2.2 表单字段

字段	类型	必填	验证规则	说明
角色名称	Input	是	2-50字符，唯一	角色显示名称
角色编码	Input	是	字母数字下划线，唯一	系统标识
角色描述	TextArea	否	最多200字符	角色职能描述
数据权限	Radio	是	-	数据访问范围

2.3 权限配置页面

2.3.1 页面布局

┌─────────────────────────────────────────────────────────────┐
│  顶部导航栏                                                  │
├──────────────┬──────────────────────────────────────────────┤
│              │  权限管理 > 角色权限 > 管理员                 │
│  侧边菜单    ├──────────────────────────────────────────────┤
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │  管理员                                   │ │
│              │  │  拥有系统管理权限，可管理用户、部门等       │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
│              │  ┌──────────────────┬──────────────────────┐ │
│              │  │  功能权限         │   成员管理           │ │
│              │  │  ─────────────── │   ────────────────── │ │
│              │  │                  │                      │ │
│              │  │  [√] 全部选择     │   已分配成员：10人   │ │
│              │  │                  │                      │ │
│              │  │  [√] 系统管理     │   ┌──────────────┐  │ │
│              │  │    [√] 用户管理   │   │ [+ 添加成员] │  │ │
│              │  │      [√] 查看    │   └──────────────┘  │ │
│              │  │      [√] 创建    │                      │ │
│              │  │      [√] 编辑    │   ┌────────────────┐ │ │
│              │  │      [√] 删除    │   │ ☑ │用户名│姓名│操作│
│              │  │    [√] 部门管理   │   ├───┼──────┼────┼───┤
│              │  │      [√] 查看    │   │ ☑ │admin │管理员│移除│
│              │  │      [√] 创建    │   │ ☑ │user01│张三  │移除│
│              │  │      [√] 编辑    │   │...│...   │...  │...│
│              │  │    [√] 权限管理   │   └────────────────┘ │ │
│              │  │      [√] 查看    │                      │ │
│              │  │      [ ] 创建    │                      │ │
│              │  │      [√] 编辑    │                      │ │
│              │  │  [√] 个人中心     │                      │ │
│              │  │    [√] 查看个人信息│                      │ │
│              │  │    [√] 编辑个人信息│                      │ │
│              │  │                  │                      │ │
│              │  │                  │                      │ │
│              │  └──────────────────┴──────────────────────┘ │
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │ [返回列表]              [保存权限配置]   │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
└──────────────┴──────────────────────────────────────────────┘

2.3.2 权限树结构

[√] 全部选择
│
├── [√] 系统管理
│   ├── [√] 用户管理
│   │   ├── [√] 查看
│   │   ├── [√] 创建
│   │   ├── [√] 编辑
│   │   └── [√] 删除
│   ├── [√] 部门管理
│   │   ├── [√] 查看
│   │   ├── [√] 创建
│   │   ├── [√] 编辑
│   │   └── [√] 删除
│   └── [√] 权限管理
│       ├── [√] 查看
│       ├── [ ] 创建
│       └── [√] 编辑
│
├── [√] 个人中心
│   ├── [√] 查看个人信息
│   └── [√] 编辑个人信息
│
└── [√] 系统设置
    ├── [√] 查看
    └── [√] 编辑

2.3.3 权限树交互

选择行为

勾选父节点：自动勾选所有子节点
取消勾选父节点：自动取消所有子节点
勾选子节点：自动勾选父节点（半选状态）
取消勾选子节点：父节点根据子节点状态变化

半选状态

部分子节点选中时，父节点显示半选状态
视觉表现：方框内有一条横线

2.4 菜单管理页面

2.4.1 页面布局

┌─────────────────────────────────────────────────────────────┐
│  顶部导航栏                                                  │
├──────────────┬──────────────────────────────────────────────┤
│              │  权限管理 > 菜单管理                          │
│  侧边菜单    ├──────────────────────────────────────────────┤
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │ [+ 新增菜单]  [保存排序]                  │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │ 菜单名称 │ 图标 │ 路径 │ 排序 │ 状态 │操作│
│              │  ├─────────┼─────┼─────┼─────┼─────┼────┤
│              │  │ ▼ 系统管理│ ⚙️  │ /   │  1  │启用│编辑│
│              │  │   ├─用户管理│ 👤  │/user│  1  │启用│编辑│
│              │  │   ├─部门管理│ 🏢  │/org │  2  │启用│编辑│
│              │  │   └─权限管理│ 🔐  │/perm│  3  │启用│编辑│
│              │  │ ▶ 个人中心│ 👤  │/profile│2│启用│编辑│
│              │  │ ▶ 系统设置│ ⚙️  │/settings│3│启用│编辑│
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
└──────────────┴──────────────────────────────────────────────┘

2.4.2 菜单创建/编辑

┌─────────────────────────────────────────┐
│  新增菜单                     [X]       │
├─────────────────────────────────────────┤
│                                         │
│  菜单类型                                │
│  ● 目录        ○ 菜单        ○ 按钮     │
│                                         │
│  上级菜单 *                              │
│  ┌─────────────────────────────────┐   │
│  │ 请选择上级菜单             [▼]   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  菜单名称 *                              │
│  ┌─────────────────────────────────┐   │
│  │ 请输入菜单名称                   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  菜单图标                                │
│  ┌─────────────────────────────────┐   │
│  │ 请选择图标                 [▼]   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  路由路径 *                              │
│  ┌─────────────────────────────────┐   │
│  │ 请输入路由路径，如：/user/list   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  组件路径                                │
│  ┌─────────────────────────────────┐   │
│  │ 请输入组件路径                   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  权限标识                                │
│  ┌─────────────────────────────────┐   │
│  │ 如：user:list                    │   │
│  └─────────────────────────────────┘   │
│                                         │
│  排序                                    │
│  ┌─────────────────────────────────┐   │
│  │ 1                                │   │
│  └─────────────────────────────────┘   │
│                                         │
│  [√] 显示在菜单中                        │
│  [√] 缓存页面                           │
│                                         │
│  ┌──────────────┐  ┌──────────────┐    │
│  │    取 消     │  │    确 定     │    │
│  └──────────────┘  └──────────────┘    │
│                                         │
└─────────────────────────────────────────┘

2.5 用户角色分配

2.5.1 分配方式

方式一：在角色管理中分配

[角色管理] → [选择角色] → [成员管理] → [添加成员] → [选择用户] → [确认]

方式二：在用户管理中分配

[用户管理] → [选择用户] → [编辑] → [角色权限] → [选择角色] → [保存]

2.5.2 添加成员弹窗

┌─────────────────────────────────────────┐
│  添加成员                     [X]       │
├─────────────────────────────────────────┤
│                                         │
│  当前角色：管理员                         │
│                                         │
│  选择用户                                │
│  ┌─────────────────────────────────┐   │
│  │ 🔍 搜索用户名/姓名...            │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │ ☑ │用户名│姓名  │部门  │当前角色   │   │
│  ├───┼──────┼─────┼─────┼─────────┤   │
│  │ ☑ │user01│张三 │技术部│ 普通用户 │   │
│  │ ☑ │user02│李四 │产品部│ 普通用户 │   │
│  │ ☐ │user03│王五 │运营部│ 管理员   │   │
│  │ ☑ │user04│赵六 │技术部│ 普通用户 │   │
│  └─────────────────────────────────┘   │
│                                         │
│  已选择 3 人                             │
│                                         │
│  ┌──────────────┐  ┌──────────────┐    │
│  │    取 消     │  │    确 定     │    │
│  └──────────────┘  └──────────────┘    │
│                                         │
└─────────────────────────────────────────┘

3. 权限模型

3.1 RBAC模型

系统采用基于角色的访问控制（RBAC）模型：

用户(User) ──N:M── 角色(Role) ──N:M── 权限(Permission)

3.2 权限类型

权限类型	说明	示例
菜单权限	控制页面访问	用户管理页面、部门管理页面
操作权限	控制功能操作	创建用户、删除部门
数据权限	控制数据范围	全部数据、本部门数据、本人数据
字段权限	控制字段可见	隐藏敏感字段

3.3 数据权限级别

级别	范围	说明
全部数据	所有数据	超级管理员
本部门及子部门	当前部门及下属部门	部门经理
本部门	仅当前部门	小组长
仅本人	仅自己的数据	普通员工
自定义	指定范围	特殊场景

4. 权限数据结构

4.1 角色数据

json

{
  "id": "role_001",
  "name": "管理员",
  "code": "manager",
  "description": "拥有系统管理权限",
  "dataScope": "DEPT_AND_CHILD",
  "dataScopeName": "本部门及子部门",
  "memberCount": 10,
  "status": "ENABLED",
  "createTime": "2024-01-15T10:30:00",
  "permissions": [
    "user:list",
    "user:create",
    "user:edit",
    "dept:list",
    "dept:create"
  ]
}

4.2 菜单数据

json

{
  "id": "menu_001",
  "name": "系统管理",
  "icon": "setting",
  "path": "/system",
  "component": "Layout",
  "permission": "system",
  "type": "CATALOG",
  "sort": 1,
  "visible": true,
  "keepAlive": true,
  "status": "ENABLED",
  "children": [
    {
      "id": "menu_002",
      "name": "用户管理",
      "path": "/system/user",
      "component": "system/user/index",
      "permission": "user:list",
      "type": "MENU",
      "parentId": "menu_001"
    }
  ]
}

4.3 权限标识规范

资源	操作	权限标识
用户	查看列表	user:list
用户	创建	user:create
用户	编辑	user:edit
用户	删除	user:delete
部门	查看列表	dept:list
部门	创建	dept:create
角色	查看列表	role:list
角色	分配权限	role:permission

5. 权限控制实现

5.1 前端控制

路由守卫

javascript

// 检查用户是否有权限访问该路由
router.beforeEach((to, from, next) => {
  const hasPermission = checkPermission(to.meta.permission);
  if (hasPermission) {
    next();
  } else {
    next('/403');
  }
});

按钮权限

vue

<!-- 有权限才显示 -->
<button v-permission="'user:create'">新建用户</button>

<!-- 自定义无权限表现 -->
<button v-permission="{ permission: 'user:delete', disabled: true }">
  删除
</button>

5.2 后端控制

接口权限注解

java

@PreAuthorize("@ss.hasPermi('user:create')")
public Result createUser(@RequestBody User user) {
    // 创建用户逻辑
}

@PreAuthorize("@ss.hasDataScope('user')")
public Result listUser(UserQuery query) {
    // 根据数据权限过滤数据
}

6. 权限校验流程

6.1 登录时权限加载

[用户登录] → [验证身份] → [查询用户角色] → [查询角色权限]
    │
    └──→ [组装权限列表] → [存储到Vuex] → [渲染菜单和按钮]

6.2 页面访问权限校验

[访问页面] → [路由守卫拦截] → [检查菜单权限]
    │
    ├──→ [有权限] → [进入页面] → [渲染按钮（根据操作权限）]
    │
    └──→ [无权限] → [跳转403页面]

6.3 数据权限过滤

[请求数据] → [后端接口] → [解析用户数据权限范围]
    │
    ├──→ [全部数据] → [返回所有数据]
    ├──→ [本部门及子部门] → [过滤部门ID] → [返回数据]
    ├──→ [本部门] → [过滤本部门ID] → [返回数据]
    └──→ [仅本人] → [过滤用户ID] → [返回数据]

7. 特殊场景处理

7.1 超级管理员

超级管理员拥有所有权限
超级管理员不受数据权限限制
超级管理员不能被删除
至少保留一个超级管理员

7.2 权限变更

用户权限变更后，下次登录生效
已登录用户需要重新登录才能获取新权限
权限变更记录操作日志

7.3 角色删除

有成员的角色不能直接删除
需要先转移或移除所有成员
删除角色时同步移除相关权限

8. 权限配置最佳实践

8.1 角色设计原则

最小权限原则：只分配必要的权限
职责分离：不同职责分配不同角色
继承关系：通用权限放在基础角色
定期审查：定期检查和清理无用权限

8.2 推荐角色设计

角色	数据权限	功能权限
超级管理员	全部	所有权限
系统管理员	全部	系统管理模块
部门经理	本部门及子部门	用户查看、部门管理
普通员工	仅本人	个人中心

9. 修订记录

版本	日期	作者	变更内容
1.0	2026-03-09	UI/UX设计师	初始版本，完成权限管理模块设计

权限管理模块设计 ​

1. 模块概述 ​

1.1 模块信息 ​

1.2 功能清单 ​

2. 页面设计 ​

2.1 角色管理页面 ​

2.1.1 页面布局 ​

2.1.2 功能说明 ​

2.2 角色创建/编辑弹窗 ​

2.2.1 弹窗布局 ​

2.2.2 表单字段 ​

2.3 权限配置页面 ​

2.3.1 页面布局 ​

2.3.2 权限树结构 ​

2.3.3 权限树交互 ​

2.4 菜单管理页面 ​

2.4.1 页面布局 ​

2.4.2 菜单创建/编辑 ​

2.5 用户角色分配 ​

2.5.1 分配方式 ​

2.5.2 添加成员弹窗 ​

3. 权限模型 ​

3.1 RBAC模型 ​

3.2 权限类型 ​

3.3 数据权限级别 ​

4. 权限数据结构 ​

4.1 角色数据 ​

4.2 菜单数据 ​

4.3 权限标识规范 ​

5. 权限控制实现 ​

5.1 前端控制 ​

5.2 后端控制 ​

6. 权限校验流程 ​

6.1 登录时权限加载 ​

6.2 页面访问权限校验 ​

6.3 数据权限过滤 ​

7. 特殊场景处理 ​

7.1 超级管理员 ​

7.2 权限变更 ​

7.3 角色删除 ​

8. 权限配置最佳实践 ​

8.1 角色设计原则 ​

8.2 推荐角色设计 ​

9. 修订记录 ​

权限管理模块设计

1. 模块概述

1.1 模块信息

1.2 功能清单

2. 页面设计

2.1 角色管理页面

2.1.1 页面布局

2.1.2 功能说明

2.2 角色创建/编辑弹窗

2.2.1 弹窗布局

2.2.2 表单字段

2.3 权限配置页面

2.3.1 页面布局

2.3.2 权限树结构

2.3.3 权限树交互

2.4 菜单管理页面

2.4.1 页面布局

2.4.2 菜单创建/编辑

2.5 用户角色分配

2.5.1 分配方式

2.5.2 添加成员弹窗

3. 权限模型

3.1 RBAC模型

3.2 权限类型

3.3 数据权限级别

4. 权限数据结构

4.1 角色数据

4.2 菜单数据

4.3 权限标识规范

5. 权限控制实现

5.1 前端控制

5.2 后端控制

6. 权限校验流程

6.1 登录时权限加载

6.2 页面访问权限校验

6.3 数据权限过滤

7. 特殊场景处理

7.1 超级管理员

7.2 权限变更

7.3 角色删除

8. 权限配置最佳实践

8.1 角色设计原则

8.2 推荐角色设计

9. 修订记录