个人中心

功能定位

个人中心维护当前账号的基本资料、头像、登录密码、第三方应用绑定和在线设备。它是用户自助管理入口，不用于修改他人账号或角色。

图 9-4　个人资料、账号安全与在线设备

适用角色

所有登录用户。

页面入口

点击右上角头像 → 个人中心（/user/profile）。

页面结构

操作步骤

更新基本资料

1. 点击右上角头像，选择“个人中心”。
2. 在“基本资料”核对昵称、手机号码、邮箱和性别。
3. 修改后点击“保存”；页面显示成功提示后再刷新核对。
4. 手机号和邮箱属于联系与安全信息，应使用本人可控且经过企业允许的地址。

修改密码

1. 切换到“修改密码”。
2. 输入旧密码、新密码和确认密码。
3. 新密码应符合企业密码策略，不使用姓名、手机号或弱口令。
4. 保存后按系统要求重新登录；其他设备会话可能需要重新认证。

更新头像

1. 点击头像区域的上传入口。
2. 选择清晰的 JPG/PNG 图片，在裁剪框中调整范围。
3. 确认上传并等待成功提示。
4. 若页面仍显示旧头像，刷新浏览器或清理头像缓存后重新进入。

管理在线设备

1. 切换到“在线设备”。
2. 核对设备类型、登录地址和登录时间。
3. 对不明设备执行移除，随后修改密码并检查登录日志。
4. 不要随意移除正在用于关键业务操作的受信设备。

输入与输出

• 输入：昵称、联系方式、性别、头像、旧密码、新密码。
• 输出：更新后的个人资料、密码状态、第三方绑定和在线设备列表。
• 个人中心不接受用户 ID 作为越权参数，服务端以当前登录身份为准。

宏澜家电示例

华东区域销售经理更换手机号后，在个人中心更新联系方式并上传企业头像。出差期间发现一台陌生设备在线，立即移除该设备、修改密码，并请安全管理员核查登录日志。涉及角色和数据范围的变化仍由管理员在用户管理中处理。

安全边界

• 不得在截图、工单或聊天中暴露完整手机号、邮箱和会话标识。
• 头像上传应限制文件类型、大小和内容，禁止脚本或伪扩展名文件。
• 修改密码必须验证旧密码；新密码不得写入日志或帮助文档。
• 第三方应用解绑后应确认是否影响单点登录，再执行其他会话操作。
• 个人中心不能自行提升角色、扩大数据范围或修改他人资料。

客户应用演示：更新头像并修改登录密码

业务情境： 新员工完成首次登录后，需要完善个人资料并更换初始密码。

第一步：点击右上角头像

步骤图 58-01　第1步：点击右上角头像。红框标出点击右上角头像。

点击右上角头像，进入“个人中心”。

第二步：在“个人信息”中上传头像、核对姓名、手机号和部门

步骤图 58-02　第2步：在“个人信息”中上传头像、核对姓名、手机号和部门。红框标出在个人信息中上传头像、核对姓名、手机号和部门。

在“个人信息”中上传头像、核对姓名、手机号和部门。

第三步：打开“修改密码”

步骤图 58-03　第3步：打开“修改密码”。红框标出打开修改密码。

打开“修改密码”，输入旧密码和符合规则的新密码。

第四步：保存后确认提示成功

步骤图 58-04　第4步：保存后确认提示成功。红框标出保存后确认提示成功。

保存后确认提示成功，并使用新密码重新登录。

第五步：在“在线设备”中检查是否有未知会话

步骤图 58-05　第5步：在“在线设备”中检查是否有未知会话。红框标出在在线设备中检查是否有未知会话。

在“在线设备”中检查是否有未知会话，必要时退出。

最终结果与效果

头像和个人资料更新，新密码生效，旧密码失效；在线设备清晰可见。

操作提示： 密码不要与外部网站复用；头像文件应清晰、合规且不含敏感信息。

常见问题

头像更新后仍显示旧图片。 等待上传成功提示，刷新页面；仍有缓存时退出重新登录。若接口报错，检查文件大小、格式和服务端文件存储。

保存基本资料失败。 检查手机号/邮箱格式、必填项和字段长度；联系管理员查看后端操作日志。

修改密码失败。 核对旧密码、两次新密码和密码复杂度；账号被冻结时应先联系管理员。

在线设备列表不完整。 Token 会话可能按客户端或时间窗口聚合，以安全管理员看到的“在线用户”页面为准。

开发人员参考

• 页面：ui/src/views/system/user/profile/index.vue
• 接口：GET /system/user/profile、PUT /system/user/profile、PUT /system/user/profile/updatePwd、POST /system/user/profile/avatar
• 在线设备：GET /monitor/online；移除设备：DELETE /monitor/online/{tokenId}
• 权限：登录用户自助访问；服务端必须从安全上下文取得当前用户，禁止信任前端传入的用户 ID。
• 密码请求应加密传输，服务端校验旧密码和复杂度；头像上传需做 MIME、扩展名、大小与内容检测。