AWS Amplify を使用してウェブアプリケーションを構築しようとしています。認証を設定しましたが、特定のページを認証されたユーザーのみが使用できるようにしたいと考えています。たとえば、ホームページは誰でも表示できますが、「/dashboard」はログインしたユーザーのみが表示できます。現在、バックエンドと React フロントエンドに AWS Amplify を使用し、ページ間のルーティングに React-router v6 を使用しています。
現在、私のルーティング コードは非常に単純で (React を初めて使用します)、App.js にあります。
リーリー最初に withAuthenticator を使用して認証したいページをラップしようとしましたが、ログイン ボックスを表示するループが発生するだけでした。
ユーザーが認証されているかどうかを確認し、別のものを返す関数を追加しようとしましたが、これは認証されたユーザーと認証されていないユーザーに対して空白の画面を表示するだけです。これは async であるためだと思いますが、私は React にあまり詳しくないので、その理由と修正方法を理解できません。
また、非同期ルーティングを行う方法があるかどうかを確認しようとしましたが、実装方法がわかりませんでした。
＃＃＃編集：＃＃＃@Jlove のソリューションはすでに期待どおりに機能しています。更新された
App.js ルーティング コードは次のとおりです:
ああああ
P粉7258276862023-09-10 10:13:10
ルートを保護するロジックを、各ルートがレンダリングするものから分離する必要があるでしょう。ルート上にレンダリングする UI/コンテンツ コンポーネントと認証を混合しないでください。
一般的な保護パターンは、レイアウト ルーティングを使用して、アクセスを保護するルート グループ全体をラップすることです。現在のユーザーの認証ステータスをチェックし、条件付きで次を返すエフェクトをトリガーするレイアウト ルート コンポーネントを作成します。
(ユーザーが認証されている場合)
＃＃＃例：＃＃＃ リーリー リーリー
ラッピングには保護された配線が必要です。リーリー
P粉9785510812023-09-10 09:28:28
これを行う 1 つの方法は、認可コンポーネントでコンポーネント ルーティングをラップすることです:
リーリー ここでの目標は、Auth によって返された結果に基づいてルートを保護することです。 Auth がキャッチ ルートを選択した場合、ルーターを使用してユーザーを未承認のページに移動します。