4. 登录与权限管理原型
4.1 用户场景与业务问题
中台产品通常面向多业务线、多系统的统一管控场景。运营人员、数据分析师、业务管理者和外部合作伙伴需要在同一个中台门户下完成登录、切换系统和访问授权资源。以下是典型用户场景与对应的业务痛点：
| 用户角色 | 典型场景 | 业务痛点 |
|---|---|---|
| 运营专员 | 早晨登录中台，依次进入订单系统、CRM、数据看板处理日常任务 | 每套系统都要独立输入账号密码，重复登录耗时且容易遗忘密码 |
| 业务主管 | 需要为团队新成员分配“数据查看+订单编辑”权限 | 权限配置入口分散，无法统一管理角色与资源的关系 |
| 开发人员 | 在中台上线新功能后，需要按角色灰度开放菜单 | 菜单硬编码在代码中，每次调整都要走发版流程，响应慢 |
| 外部合作伙伴 | 通过SSO链接直接跳转到中台特定页面，无需额外认证 | 跨域认证不稳定，Token失效后体验中断且无明确提示 |
核心业务问题：中台需要一套统一的认证与权限体系，实现“一次登录、全网通行”，同时支持细粒度的角色-权限映射和菜单的动态展示，降低权限管理成本和系统耦合度。
4.2 用户访谈与需求拆解
针对上述痛点，产品经理对运营主管、系统管理员和前端开发负责人进行了定向访谈，提炼出以下关键需求：
| 访谈对象 | 原始反馈摘要 | 需求拆解 |
|---|---|---|
| 运营主管 | “我每天要打开4个系统，每个都要登录，经常搞混密码，希望点一次就能全通。” | 单点登录（SSO）：统一认证中心 + Token自动传递 |
| 系统管理员 | “给新人开权限很麻烦，要先在用户系统加人，再去每个后台配角色，容易漏。” | 角色权限树：可视化树结构，用户-角色-权限一次关联 |
| 前端开发负责人 | “菜单权限判断散落在各模块，新功能上线要改多处代码，风险高。” | 菜单动态加载：后端返回权限数据，前端按角色渲染菜单 |
需求优先级排序： SSO登录流程（P0） > 角色权限树（P1） > 菜单动态加载（P1）。其中SSO是所有权限管理的基础，必须优先保障流程闭环和异常处理。
4.3 方案表达
4.3.1 单点登录流程设计
在中台原型中，SSO流程通过“统一认证中心 + 全局Token变量 + 页面跳转”模拟。用户仅需在入口处认证一次，后续子系统自动携带Token完成身份校验。
Axure实现步骤：
- 创建全局变量：在
项目 → 全局变量中定义SSOToken（字符串类型）和CurrentUserRole（字符串类型），用于存储认证信息。 - 设计登录页面：放置“用户名”“密码”输入框和“登录”按钮。登录按钮交互事件中，使用“设置变量值”将模拟Token写入
SSOToken，并将角色写入CurrentUserRole。 - 设置认证中转页：新建页面
SSO_Callback，在页面加载时判断SSOToken是否为空。若为空则跳转回登录页；若不为空则根据CurrentUserRole分发到对应子系统首页。 - 子系统页面守卫：在每个受保护页面的“页面加载”交互中添加条件判断——若
SSOToken为空则跳转至登录页，并弹出提示“会话已过期，请重新登录”。
交互防坑说明： Axure原型中无法真正实现跨域Token传递，建议使用“全局变量 + 页面参数”组合模拟。在实际演示时，可通过“预览→共享→生成链接”方式让测试人员体验完整的SSO跳转流程。务必在中转页添加Loading动画（动态面板+等待时间），增强真实感。
4.3.2 角色权限树设计
角色权限树用于可视化展示“用户组 → 角色 → 资源权限”的层级关系。原型中采用“树形控件 + 中继器”组合实现动态数据绑定。
Axure实现步骤：
- 准备中继器数据集：在中继器中定义字段
节点ID、父节点ID、节点名称、权限标识、节点类型（角色/权限/菜单）。 - 加载树形结构：使用递归思路，通过“筛选条件”逐层渲染子节点。第一层筛选
父节点ID == "0"作为根节点，点击根节点时展开并加载其子节点。 - 交互事件绑定：单击节点时，使用“设置文本”在右侧详情区显示当前节点的权限标识和描述。双击节点时，弹出编辑窗口（动态面板）允许调整权限勾选状态。
- 模拟数据注入：在中继器中预置3~5级树数据（如“中台系统 → 订单模块 → 订单查询 → 查看详情”），确保演示时能展示多级展开效果。
数据模拟技巧： 使用以下JSON结构作为中继器数据源模板，便于快速填充和调整：
[
{
"节点ID": "1",
"父节点ID": "0",
"节点名称": "中台系统",
"权限标识": "root",
"节点类型": "应用"
},
{
"节点ID": "1-1",
"父节点ID": "1",
"节点名称": "订单管理",
"权限标识": "order:view",
"节点类型": "模块"
},
{
"节点ID": "1-1-1",
"父节点ID": "1-1",
"节点名称": "订单查询",
"权限标识": "order:query",
"节点类型": "权限"
},
{
"节点ID": "1-1-2",
"父节点ID": "1-1",
"节点名称": "订单编辑",
"权限标识": "order:edit",
"节点类型": "权限"
},
{
"节点ID": "1-2",
"父节点ID": "1",
"节点名称": "数据分析",
"权限标识": "data:view",
"节点类型": "模块"
}
]
4.3.3 菜单动态加载设计
菜单动态加载的核心思路是：根据当前用户的角色（CurrentUserRole），从模拟的“菜单权限映射表”中过滤出可见的菜单项，并动态渲染到导航栏。原型中通过“条件判断 + 动态面板状态切换”实现。
Axure实现步骤：
- 建立菜单映射表：在页面中创建一个隐藏的中继器或局部变量数据集，包含字段
角色、菜单名称、菜单链接、排序。 - 渲染导航栏：在主导航区域使用“中继器”作为菜单容器，在页面加载时根据
CurrentUserRole筛选数据，动态生成菜单项。 - 模拟不同角色视图：在原型中预设3种角色（如“管理员”“运营”“访客”），登录时通过下拉切换角色，观察菜单的变化。
- 无权限状态处理：如果用户尝试通过URL直接访问无权限页面，在页面加载时判断
CurrentUserRole是否包含对应权限标识，否则显示“403 无权限”提示（动态面板切换）。
方案亮点： 该设计将菜单配置从“硬编码”转变为“数据驱动”。产品经理可以一套原型展示多角色视图，开发人员也能直接参考数据结构进行API设计，减少前后端联调返工。
4.4 指标验证
原型交付后，需要通过以下量化指标验证方案是否满足业务诉求：
| 指标名称 | 定义 | 目标值 | 验证方式 |
|---|---|---|---|
| SSO登录成功率 | 一次认证后，成功跳转到目标子系统的比例 | ≥ 99% | 原型中模拟10次跨系统跳转，记录Token传递成功率 |
| 权限树展开深度 | 角色权限树支持的最大层级数 | ≥ 5 层 | 在中继器中插入5级数据，验证展开无卡顿 |
| 菜单动态加载响应时间 | 从页面加载到菜单渲染完成的时间 | ≤ 1.5 秒 | 使用Axure预览控制台（F12）计时 |
| 角色-菜单覆盖准确率 | 不同角色登录后，菜单与实际权限匹配的准确度 | 100% | 逐一测试3种预设角色的菜单列表 |
验证建议： 在原型验收阶段，邀请运营主管和系统管理员各1名，按照“登录→查看权限树→切换角色→验证菜单变化”的脚本走查，记录每一步的实际表现与预期偏差。