Skip to content

feat(auth): 登录回调先跳转再拉用户,优化 callback 页与 useAuth#317

Merged
xun082 merged 1 commit into
mainfrom
feat/auth-redirect-and-callback-optimize
Mar 12, 2026
Merged

feat(auth): 登录回调先跳转再拉用户,优化 callback 页与 useAuth#317
xun082 merged 1 commit into
mainfrom
feat/auth-redirect-and-callback-optimize

Conversation

@xun082

@xun082 xun082 commented Mar 12, 2026

Copy link
Copy Markdown
Owner

PR 描述

PR 类型

  • 🐛 Bug 修复
  • ✨ 新功能
  • 💄 UI/UX 改进
  • ♻️ 重构
  • 🚀 性能优化
  • 📝 文档更新
  • 🔄 其他

Issue 关联

Closes #

其他信息

- useAuth: handleAuthSuccess 先安排跳转再后台 getCurrentUser,避免卡在「正在跳转」
- useAuth: 增加 client-side 未生效时的整页跳转兜底,移除所有 console
- auth/callback: 优化回调页逻辑与文案,抽取常量与工具函数,改进无障碍
- types: AuthResponse 恢复简洁注释

Made-with: Cursor
@netlify

netlify Bot commented Mar 12, 2026

Copy link
Copy Markdown

Deploy Preview for ornate-blancmange-89db6b failed. Why did it fail? →

Name Link
🔨 Latest commit c649ea9
🔍 Latest deploy log https://app.netlify.com/projects/ornate-blancmange-89db6b/deploys/69b350279e07cc0008dd1ee4

@gemini-code-assist

Copy link
Copy Markdown
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求旨在全面优化用户认证流程,特别是登录成功后的用户体验。通过调整认证成功后的跳转策略,确保用户能够更快地进入目标页面,同时在后台异步加载用户资料。此外,还增强了认证回调页面的稳定性和可访问性,并对相关代码进行了清理和标准化,以提高整体代码质量。

Highlights

  • useAuth Hook 优化: 优化了 handleAuthSuccess 函数,优先进行页面跳转,再在后台拉取用户数据,避免用户等待,提升了用户体验。
  • 客户端跳转兜底机制: 增加了客户端整页跳转的兜底逻辑,以防客户端导航失效,确保用户始终能被正确重定向。
  • 认证回调页重构: 重构了 auth/callback 页面的逻辑和文案,提取了常量和工具函数,并改进了无障碍性,使其更健壮和用户友好。
  • 代码清理与标准化: 移除了 useAuth hook 中的所有 console.log 调试语句,并简化了 AuthResponse 接口的注释,提高了代码的整洁度和可维护性。
Changelog
  • apps/DocFlow/src/app/auth/callback/page.tsx
    • 重构了 CallbackContent 组件,引入了新的工具函数 safeDecodeparseOptionalInt 来解析 URL 参数。
    • 定义了 DEFAULT_REDIRECTREDIRECT_STORAGE_KEY 常量,使重定向逻辑更清晰。
    • 更新了 UI 状态管理变量,将 state 更名为 uiStateauthProcessed 更名为 processed
    • 优化了 getRedirectUrl 函数的逻辑,使其能更准确地获取重定向 URL。
    • 增强了 UI 元素的无障碍属性,如 role="status"aria-live="polite"aria-label
    • 在成功状态下添加了一个手动跳转按钮,以防自动跳转失败。
    • 更新了错误状态下按钮的样式,并统一了文本内容。
    • 将加载中的回退 UI 提取为独立的 LoadingFallback 组件。
    • 将默认导出组件 AuthCallback 重命名为 AuthCallbackPage
  • apps/DocFlow/src/hooks/useAuth.ts
    • 重构了 handleAuthSuccess 函数,实现了先进行客户端导航跳转,再在后台异步拉取用户资料的策略。
    • 增加了客户端整页跳转的兜底逻辑,以应对 router.push 可能失效的情况。
    • 移除了所有 console.log 调试语句,使生产环境代码更干净。
    • 引入了 REDIRECT_DELAY_MSREDIRECT_FALLBACK_CHECK_MSAUTH_CALLBACK_PATHDEFAULT_REDIRECT_URL 等常量。
    • 添加了 getErrorMessageisRelativePath 辅助函数,用于统一错误信息处理和路径判断。
    • 更新了 GitHubCallbackParams 接口,使其包含 redirectUrl 属性。
    • tokenLoginMutation 中,使用 parseOptionalInt 简化了 expires_inrefresh_expires_in 的解析。
    • 为所有 useMutation 调用添加了 mutationKey
    • 统一了所有认证相关 hook 的错误处理逻辑,使用 getErrorMessage 捕获并显示错误信息。
  • apps/DocFlow/src/types/auth.ts
    • 移除了 AuthResponse 接口中 user 属性的冗余注释,使其更简洁。
Activity
  • 此拉取请求的描述中提到了 "Made-with: Cursor",这表明作者可能使用了 AI 辅助编程工具来编写或重构代码。
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@xun082 xun082 merged commit cf957ae into main Mar 12, 2026
0 of 6 checks passed

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

这个 PR 做的很棒!通过将认证流程改为“先跳转,后获取用户信息”的模式,极大地优化了用户在登录回调页的体验。代码重构质量很高,主要体现在:

  1. useAuth hook 逻辑更清晰,移除了大量调试日志,并引入了常量和辅助函数,增强了代码的可读性和可维护性。
  2. handleAuthSuccess 函数的重构是本次优化的核心,通过异步获取用户信息,避免了 API 请求阻塞页面跳转,同时加入了 window.location.href 作为备用跳转方案,非常稳健。
  3. callback/page.tsx 组件也得到了全面的改进,包括代码结构、UX(增加了手动跳转链接)和可访问性(a11y)支持。
    整体而言,这是一次高质量的重构和功能优化。我只发现一个可以微调的小细节。

Comment on lines 174 to +180
mutationFn: async ({
authData,
redirectUrl,
}: {
authData: AuthResponse;
redirectUrl?: string;
}) => {
return { authData, redirectUrl };
},
}) => ({ authData, redirectUrl }),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

useTokenLogin 中的 mutationFn 被标记为 async,但其内部没有使用 await,而是直接返回一个对象。这里的 async 关键字是多余的。

为了使代码更简洁并准确反映其同步行为,可以移除 asyncreact-queryuseMutation 可以很好地处理同步函数和返回 Promise 的异步函数。

Suggested change
mutationFn: async ({
authData,
redirectUrl,
}: {
authData: AuthResponse;
redirectUrl?: string;
}) => {
return { authData, redirectUrl };
},
}) => ({ authData, redirectUrl }),
mutationFn: ({
authData,
redirectUrl,
}: {
authData: AuthResponse;
redirectUrl?: string;
}) => ({ authData, redirectUrl }),

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