前言
這個 frontend-solution 用圖是未來可能遇到相同問題前以來這邊看一下
減少重複從頭思考的過程
登入流程
這篇會以我目前正在重構的專案紀錄我整個 login 的 flow
驗證方式
在我上一間公司的 login api 稍微比較完整一點 會有 login API, verify API 和 refresh token API
loginAPI: 取的 access token 和 refresh token
verifyAPI: 帶入 access token 做 token 的驗證
refreshAPi: 帶入 refresh token 取得 access token
但目前的專案就比較單純
只有一個 login API
因此 verify 會選一個簡單的 API 來 call 判斷是否為 login 狀態
情境
這裡就描述會出現的幾個情境，不講code
登入頁面
進入到 /login 頁面
有幾個情境會需要 cover
- 檢查 local storage 有沒有 token（登入過），如果有就會直接 call verify api，若 api response success 就直接 navigate 到 dashboard頁面
- 如果沒有 token，就進入正常登入流程，call login api，如果 response success navigate 到 dashboard
備註：
這邊我遇到的問題是，如果在登入成功後，同時塞 token 到 local storage 和 navigate 會有問題，因為我進入到 dashboard 也會 verify
一次。
因此如果 local storage 的 token 還沒有設置好，就直接 navigate 到 dashboard 並 call verify api，頁面就會閃爍
Dashboard頁面
所有 dashboard 頁面都會有一個 layout component 做一個 outlet，所以方問任何 dashboard 頁面都會經過這個 layout
因此會在這個 layout 做 登入狀態的 verify
直接訪問 dashboard 有幾個情境
- 沒有 token 狀態，verify 直接返回錯誤狀態，並且 navigate 到 login page
- 有 token 狀態，verify token，response success 保留在原本頁面， error 就 navigate 到 login page