SPAのログインチェック機能がいい感じに作れたので実装の流れを軽くメモる

SPAのログインチェック機能が自分としてはいい感じに出来たので記録に残す。

React Router v5までであれば、いわゆるPrivateRouteのやり方を用いれば良いのだが、今回はv6 のObject-based Routesを用いたのでやり方を自分で考える必要があった。出来てしまえば大したことはなかったのだが、微妙に紆余曲折あったのでメモ。

実装の流れ

(1). Privateコンポーネントの作成 & route objectへの反映
- 認証が必要な機能のルーティングを統括するPrivateコンポーネントを作成し、route objectに反映する。
(2). ログインチェック機能の有効・無効を表すグローバルなステート(loginCheck, 初期値 true) & ステートを変更するためのaction等々を作成する
(3). ログインチェック用のhooksを作成し、Privateコンポーネントに組み込む
- ログインチェック用のAPIを叩く
- loginCheckステートをfalseにする
- 失敗した場合はログイン画面に遷移する
(4). Privateコンポーネントのレンダリングで、「loginCheck = trueの時にはローディング画面を表示」する処理を追加する

動くコードは下記リポジトリ参照。 github.com

特に関連するのは以下のファイル。