nobu blog

プログラミングやゲームの話など。

*



【React】ログイン後にリロードするとログイン画面にリダイレクトされてしまう問題と解決方法メモ

   

概要

Reactでログイン機能を実装した際に、画面をリロードすると毎回ログイン画面が表示されてしまう症状が発生したので対策とメモです。

スポンサーリンク

症状

React (React Hook)を使用したログイン機能をRouterを使用して実装し、認証済みの場合のみアクセス可能なページを作成します。
下記のようなカスタムしたRouter(UserAuthRoute)を作り、これを使用したページコンポーネントは認証しないとアクセスできないようにします。
実装は後述しますが、このような機能を実装した状態で、ログイン後に画面をリロードすると必ずログイン画面になってしまい、その後自動でログインされてトップページに戻るという症状が発生しました。

UserAuthRouteが、ユーザー認証が無いとログインページにリダイレクトするRouterになっています。
認証状態は、UserAuthContextといったカスタムのコンテキストを作ってそちらで管理しています。

ログインページに使用している、UserLoginRouteは認証済みであれば、ログインページにアクセスさせないようにログイン済みであればトップページにリダイレクトするようにします。

スポンサーリンク

原因

下記のようなログイン状態を管理するContextProviderにおいて、初期ロード状態を定期するloadingを使用して描画を止めていない事が原因でした。
{!loading && children}
といった形で、loadingがtrueになるまで子の描画を行わないようにする事で解決しました。
これを行わないと起動直後の認証が終わる前に、UserAuthRouteなどで認証状態のチェックが行われてしまい、結果として未認証としてログインページにリダイレクトされてしまうという症状が出ていました。

おまけ

上記のような実装を行うと、初期認証時に画面が真っ白になってしまうので、下記のようにローディング画面を入れた方が良いです。
(lodingの時には専用のhtml要素を返す形です。)

 - Javascript, React, TypeScript