Skip to content

Fix: 未知原因登入失敗 #390

Closed
@Yuwen-ctw

Description

@Yuwen-ctw

議題描述:

經第三方登入成功,並進入大廳後僅一瞬間,會立即轉變成登入失敗,導回登入頁。

分析:

  1. 登入成功後第一個執行的 API ( /users/me ) 就已經攜帶錯誤的 token,該錯誤之 token 為 [token]。故接著檢查後端的回傳結果是否正確。
  2. 透過 devTool 將傳輸速度調整為 slow 3G 後,觀察登入流程中 URL 之變化,可以確定登入成功後,後端有將正確的 token 放到 query string 中 ( /auth/token/eyJhbGciO..... )。故追查範疇只剩下取得 token 後在打第一個 API 前的這段期間,token 在前端的資料流向。
  3. 最後透過 devTool 追查打包後的源碼,發現於 auth/[token].tsx 元件中,使用 Next.js 提供的 useRouter() API,取得 query string 時, Next.js 所回傳的結果就已經是 [token] (如下圖),顯然不是預期的結果。
    image

目前依然無法理解為何 useRouter().query.token 會得到錯誤的結果,而且近期鮮少進行套件框架更新或異動程式碼,不知道為何會這樣。

解方

  • 目前打算先改使用 Next.js 的 useSearchParams 來取得 token,目前在開發模式下可以正常運作,但需上線才可確定產品環境是否沒問題。
  • (更) 感謝 @JohnsonMao 提醒,useSearchParams 並不適用,改以 useRouter.asPath 取得 token。

Metadata

Metadata

Assignees

Labels

bugFix something in main

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions