問題タブ [stay-logged-in]

React JS と Firebase を使用して Web アプリを開発しています。アプリで次の動作が機能するようにします。

サインイン ページには、[サインインしたままにする] チェックボックスがあります。ユーザーがそのチェックボックスをマークしなかった場合、ユーザーはタブ/ブラウザーを閉じたときに自動的にサインアウトする必要があります。ユーザーが「サインインしたままにする」チェックボックスをマークした場合、ユーザーがダッシュボードの「サインアウト」ボタンをクリックしない限り、ユーザーはサインアウトされません。さらに、ユーザーがログインしている場合は、ユーザーをダッシュ​​ボード ページにリダイレクトする必要があります。ユーザーがログインしていない場合、ユーザーはサインイン ページにリダイレクトする必要があります。

また、ユーザーが手動で URL を入力してページに移動できないようにする必要があります。

これが現在の index.js ファイルの一部です。

ここで、私の問題は、ユーザーがリダイレクト後に戻ることができることです。これは正しい方法ではないと思います。

だから、私がこの行動を成し遂げるのを手伝ってください。コード例での回答は大歓迎です。

誰もが少なくとも一度は取り組んだことがあると思う非常に有名な問題があります。ページが更新されても、反応アプリにログインしているユーザーを保持したい。これを行う方法に関する関連する質問と記事をすべて読みましたが、残念ながらどこにも行きませんでした。私の ProtectedComponent には、次のコードがあります。

ご覧のとおり、認証レデューサーの initialState に isLoggedIn という変数を実装しました。この変数が true の場合、保護されたルートにアクセスできます。それ以外の場合はアクセスできません。

サインイン コンポーネントで、受信したトークンを API から localStorage に保存します。これで完全に完了です。しかし、私の主な質問は、ユーザーがサインインしてから保護されたルートに移動すると、ページを更新することで initialState(isLoggedIn) が消えて false に変わり、ユーザーがログアウトすることです。これは、ReactJS の文化ではまったく自然なことです。しかし、アプリの起動時に、以前に受信したトークンの認証を探し、まだ期限切れになっていない場合は、ユーザーをアプリが更新されたページに移動する方法を実装するにはどうすればよいですか。これは膨大な数のウェブサイトで行われているので、私はそれが可能であることを知っています. でも方法がわからない？

私のサインインコンポーネント:

マザーレベルのコンポーネント App でフック useEffect も使用したことは言及する価値があります。つまり、アプリが useEffect でコールバックを起動すると、localStorage トークンが承認されているかどうかがチェックされますが、js の非同期の性質と axios 要求のために、この axios 要求の応答が受信される前に initialState が設定されるため、これは解決策ではありません。 .

私のアプリのコンポーネント: