页面：登录
字数
1561 字
阅读时间
7 分钟
目的与入口
- 页面定位：承接 MindGuard 的首次身份校验与会话续期，确保用户在进入“我的”Tab 以及所有需鉴权的操作前建立安全登录态。
- 入口来源：
- “我的”Tab 未登录状态点击任意主模块或顶部登录提示（参见《页面-我的.md》“模块1：个人概览卡”未登录态）。
- 任何接口返回 401/
E_AUTH_EXPIRED时弹出全局提示，点击“重新登录”跳转。 - 需要鉴权的深链接（如任务详情、隐私中心）在进入前检测登录态，若缺失则 redirect 至
/pages/login/index?redirect=<encoded>。
交互流程
- 触发登录：用户点击“微信一键登录”或在弹窗中确认重新登录。
- 授权流程：
- 调用
wx.login获取临时 code，并展示加载态。 - 后端
authLogin云函数根据 code 创建/刷新users记录与sessions会话。
- 调用
- 验证验证码（必要场景）：
- 若触发风控或频繁失败，界面展示图形验证码或短信二次验证。
- 用户填写验证码后点击“验证”，错误则出现 Danger-500 语义色提示，可点击“刷新验证码”。
- 绑定学号（首次登录或资料缺失时）：
- 登录成功后，弹出绑定学号表单（学号 + 校园统一密码），调用
/api/auth/bind-student。 - 绑定成功写入
users.campus_affiliation与users.student_binding子对象。
- 登录成功后，弹出绑定学号表单（学号 + 校园统一密码），调用
- 结果反馈：
- 成功：Toast “登录成功”，延迟 500ms 后根据 redirect 参数或来源页返回。
- 失败：
- 网络错误：展示重试按钮和离线提示（信息语义色）；允许在离线模式继续浏览非鉴权页面。
- 验证码错误：输入框标红，辅助文本提示“验证码不正确，请重试”。失败三次自动刷新验证码并冷却 60s。
- 账号不存在：提示“该账号尚未开通 MindGuard，请联系校方或使用另一微信号”，提供联系客服入口。
- 封禁/受限：根据
users.status显示停用说明与申诉指引，禁止继续登录，埋点login_result（status=restricted）。
UI 模块
- 头部说明：品牌蓝渐变背景（
linear-gradient(180deg,#EEF5FF,#FFFFFF)），文案强调“守护你的心理成长”。 - 微信一键登录按钮：主按钮使用
--color-brand-500背景、圆角 48rpx，点击后进入加载态（描边加深至 600），按钮下方提示“登录即表示同意《用户协议》《隐私政策》”。 - 学号绑定输入框：采用卡片白底 + 投影（参考《样式规范/我的.md》卡片风格），字段包含学号、密码；支持“显示密码”开关。
- 验证码区块：图形验证码图片占位 240×96rpx，右侧“刷新”次按钮使用描边样式；输入框聚焦时描边颜色
--color-brand-500。 - 协议勾选与隐私提示：复选框默认勾选，可点击跳转协议页面；下方展示“未成年人请先征得监护人同意”等安全提示。
- 错误提示组件：采用 Danger-50 背景 + Danger-500 文本，并配合警示图标，位置紧贴对应输入框。
路由与返回
- 页面路径：
/pages/login/index。 - 支持
redirect查询参数，登录成功后使用wx.redirectTo或wx.switchTab返回来源页；若为空且来自“我的”，默认wx.switchTab({ url: '/pages/mine/index' })。 - 登录页面禁止返回未授权来源页（拦截
navigateBack），提供明确“返回首页”按钮。 ensureLoggedIn公共方法在调用鉴权接口前统一检测登录态，不重复弹出登录页。
无障碍与可访问性
- 所有表单控件绑定
<label>并提供 ARIAaria-describedby指向错误文本。 - 关键按钮（微信登录、绑定学号、刷新验证码）提供可聚焦态，按键切换时显示描边加粗或阴影变化。
- 颜色对比满足《色彩系统.md》：文字对比度 ≥4.5:1，错误提示采用 Danger-500 与浅色背景组合，同时提供图标/文案双通道。
- 登录结果通过 Toast 与可读文本同步播报，失败时附带操作建议。
性能与包体
- 验证码图片通过 CDN 缓存并附带
cache-bust参数避免旧图重复；图像资源控制在 ≤20KB。 - 短信验证冷却提示使用倒计时组件（惰性加载），避免首屏引入额外分包。
- 登录 JS 逻辑内聚于
services/auth.js，按需加载避免影响其他页面体积。
埋点与数据联动
- 登录页曝光：
pv_login（参数entry_source、redirect）。 - 操作事件：
act_login_wechat、act_login_bind_student、act_login_captcha_refresh、act_login_protocol_toggle。 - 结果事件：
login_result（status=success/failed/restricted/cancelled，error_code）。详见《埋点与数据分析.md》更新章节。
验收清单
- [ ] 未登录从“我的”进入，页面文案、按钮状态符合视觉规范。
- [ ] 微信一键登录成功后写入
users.last_login_at与sessions记录，返回来源页正确。 - [ ] 连续三次验证码错误触发冷却提示，重新请求验证码成功。
- [ ] 封禁用户进入时展示封禁说明，不返回上一页且记录埋点。
- [ ] 登录后首个需要鉴权的接口（如
/api/tasks）正常返回，未登录时统一跳转登录页。 - [ ] VoiceOver/安卓 TalkBack 能正确朗读控件与错误信息。
变更记录
- 2024-04-07：首次整理登录页面文档，补充入口、流程、UI、埋点与验收项。
贡献者
Cai Hongyu