Closed
Description
議題描述:
經第三方登入成功,並進入大廳後僅一瞬間,會立即轉變成登入失敗,導回登入頁。
分析:
- 登入成功後第一個執行的 API ( /users/me ) 就已經攜帶錯誤的 token,該錯誤之 token 為 [token]。故接著檢查後端的回傳結果是否正確。
- 透過 devTool 將傳輸速度調整為 slow 3G 後,觀察登入流程中 URL 之變化,可以確定登入成功後,後端有將正確的 token 放到 query string 中 ( /auth/token/eyJhbGciO..... )。故追查範疇只剩下取得 token 後在打第一個 API 前的這段期間,token 在前端的資料流向。
- 最後透過 devTool 追查打包後的源碼,發現於 auth/[token].tsx 元件中,使用 Next.js 提供的 useRouter() API,取得 query string 時, Next.js 所回傳的結果就已經是 [token] (如下圖),顯然不是預期的結果。
目前依然無法理解為何 useRouter().query.token 會得到錯誤的結果,而且近期鮮少進行套件框架更新或異動程式碼,不知道為何會這樣。
解方
- 目前打算先改使用 Next.js 的 useSearchParams 來取得 token,目前在開發模式下可以正常運作,但需上線才可確定產品環境是否沒問題。
- (更) 感謝 @JohnsonMao 提醒,useSearchParams 並不適用,改以 useRouter.asPath 取得 token。