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