Skip to content

fix: 修复登录页聚焦刷新丢失表单 - #243

Open
tanbro wants to merge 1 commit into
HuangPuStar:mainfrom
tanbro:fix/login-form-focus-refresh
Open

tanbro wants to merge 1 commit into
HuangPuStar:mainfrom
tanbro:fix/login-form-focus-refresh

Conversation

@tanbro

@tanbro tanbro commented Aug 25, 2026

Copy link
Copy Markdown
Contributor

故障现象

/ctrl/login 填写邮箱、手机号、密码、确认密码或姓名等登录/注册表单内容后,切换到其他浏览器标签页或窗口,再返回登录页时,尚未提交的内容会被清空,登录/注册模式等组件本地状态也可能恢复初始值。

该问题可在 Chrome、Edge 和 Firefox 中稳定复现。DevTools Network 开启 Preserve log 后可看到返回页面时出现两次 /api/auth/get-session,随后再次请求 /api/auth/signup-status,但没有新的 /ctrl/login Document 请求:浏览器没有重新加载页面,而是应用内部卸载并重新挂载了登录页。

根因

Better Auth 默认在页面重新可见时刷新 session。未登录状态下,刷新过程会短暂再次进入 isPending;根路由原先只要看到 isPending 就用全屏 loading 替换整个 <Outlet />。因此登录页被卸载,保存在组件 useState 中的未提交表单内容随组件销毁而丢失;重新挂载时又触发了 /api/auth/signup-status

修复方式

  • 保留 Better Auth 的窗口聚焦 session revalidation,不关闭安全相关的会话刷新
  • 新增单调的首次 session 加载门控:仅在应用首次解析 session 前显示全屏 loading
  • 首次 session 已完成后,后台 revalidation 即使短暂进入 isPending,也保持当前路由子树挂载
  • 认证结果变化后仍由现有导航逻辑处理;未把密码或其他表单草稿写入 localStorage / sessionStorage
  • 增加回归测试,覆盖首次 pending、初始已有结果,以及后台 pending 周期中子组件不卸载、表单草稿不丢失

验证

  • bun test web/src/__tests__/initial-session-loading.test.tsx:3 pass / 0 fail
  • web/ 下执行 bun x vite build:通过
  • Chrome、Edge、Firefox 手工切换标签页:登录表单草稿保持不变
  • bun run precheck:format、import-sort、server/web TypeScript、lint 通过;后端测试在 Windows + Bun 1.4.0 下为 8028 pass / 94 fail,失败集中于 /bin/sh、symlink、Windows 路径及级联用例,与本次前端改动无关

风险与回滚

改动仅调整 session 后台 revalidation 时的加载展示策略,不改变认证请求、会话刷新或权限判断。回滚本提交即可恢复原行为。

🤖 Generated with Claude Code

仅在首次会话解析期间阻塞路由树,后台会话刷新保持登录页及本地表单状态挂载。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant