Skip to content

[Bug] 前端 Hash 路由导致 Google OAuth 授权回调后静默假死,无法完成登录流程 #8

Description

@unkn0tted

🐛 缺陷描述 (Description)
在使用 Google OAuth 进行第三方登录时,Google 成功授权并携带 code 重定向回前端页面后,前端页面出现静默假死。页面 URL 发生改变,但控制台无任何报错,且前端未向后端发起携带 code 的换取 Token 请求(即未触发实际的登录回调 API)。

经深度排查,后端 API 接口正常,且 Google 授权流程正常。问题根因极大概率在于 前端 SPA 的 Hash 路由未能正确拦截/解析 Google 回调的 URL Search 参数 (?code=...),导致回调组件的逻辑中断。

💻 环境信息 (Environment)
前端版本 (Frontend): v1.0.9

后端版本 (Backend): NPanel Backend 1.0.11

Web 服务器 (Nginx): OpenResty 1.31.1.1-0-noble

客户端环境 (Client): Chrome 150.0.0.0 (Windows 10)

配置的回调地址 (Redirect URI): https://example.com/oauth/google/

🔄 重现步骤 (Steps to Reproduce)
在前端页面点击“Google 登录”。

前端向后端发起 POST /api/v1/auth/oauth/login 获取授权链接。

(附载荷: {"method":"google","redirect":"https://example.com/oauth/google/"})

页面成功 302 重定向至 Google 授权页,用户完成授权。

Google 携带授权码重定向回站点的回调地址:
https://example.com/oauth/google/?state=xxx&code=4/0AXEQ...&scope=...

此时页面 URL 变为带有 Hash 的形式(例如 https://example.com/#/oauth/google?state=...),但页面内容无变化(停留在原UI)。

查看浏览器 Network 面板,发现前端仅请求了 /api/v1/common/site/config,彻底丢失了后续向后端发送 code 换取 Token 的动作。

✅ 期望行为 (Expected Behavior)
前端路由在匹配到 /oauth/google/ 路径时,应当成功提取 URL 中的 code 参数,并立即向后端 API(如 callback 接口)发起 POST 请求以换取用户的 Access Token,随后完成本地状态存储并重定向至用户中心。

❌ 实际行为 (Actual Behavior)
前端逻辑中断。无网络请求发往后端以核销 code,且浏览器 Console 面板无任何抛错(静默失败)。

🔬 根因排查与分析 (Root Cause Analysis)
为了排除后端问题,已在服务器侧通过 cURL 模拟了前端第一步请求,证实后端接口完全正常,能正确生成跳转链接:

# 模拟前端请求授权链接 (测试成功)
curl 'https://example.com/api/v1/auth/oauth/login' \
  -H 'content-type: application/json' \
  --data-raw '{"method":"google","redirect":"https://example.com/oauth/google/"}'

# 返回预期格式: {"code":200, "message":"Success", "data":{"redirect":"https://accounts.google.com/o/oauth2/auth?access_type=offline&client_id=[CLIENT_ID]&redirect_uri=https%3A%2F%2Fexample.com%2Foauth%2Fgoogle%2F&..."}}

🛠️ 建议的修复方向 (Proposed Fix)
建议前端开发者检查 OAuth 回调页面的生命周期函数。在获取 URL 参数时,请确保兼容 Hash 模式下 Query 参数的位置差异,建议增加原生解析 window.location.href 以兜底截取 code= 后的字符串,确保参数能正确提取并传递给后端的 Token 换取接口。

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions