認証されていないユーザーをリダイレクトする、AWS Amplify

Question

AWS Amplify を使用してウェブアプリケーションを構築しようとしています。認証を設定しましたが、特定のページを認証されたユーザーのみが使用できるようにしたいと考えています。たとえば、ホームページは誰でも表示できますが、「/dashboard」はログインしたユーザーのみが表示できます。現在、バックエンドと React フロントエンドに AWS Amplify を使用し、ページ間のルーティングに React-router v6 を使用しています。

現在、私のルーティング コードは非常に単純で (React を初めて使用します)、App.js にあります。

リーリー

最初に withAuthenticator を使用して認証したいページをラップしようとしましたが、ログイン ボックスを表示するループが発生するだけでした。

リーリー

ユーザーが認証されているかどうかを確認し、別のものを返す関数を追加しようとしましたが、これは認証されたユーザーと認証されていないユーザーに対して空白の画面を表示するだけです。これは async であるためだと思いますが、私は React にあまり詳しくないので、その理由と修正方法を理解できません。

リーリー

また、非同期ルーティングを行う方法があるかどうかを確認しようとしましたが、実装方法がわかりませんでした。

＃＃＃編集：＃＃＃

@Jlove のソリューションはすでに期待どおりに機能しています。更新された

App.js

ルーティング コードは次のとおりです: ああああ

Answer 1

ルートを保護するロジックを、各ルートがレンダリングするものから分離する必要があるでしょう。ルート上にレンダリングする UI/コンテンツ コンポーネントと認証を混合しないでください。

一般的な保護パターンは、レイアウト ルーティングを使用して、アクセスを保護するルート グループ全体をラップすることです。現在のユーザーの認証ステータスをチェックし、条件付きで次を返すエフェクトをトリガーするレイアウト ルート コンポーネントを作成します。

なし/読み込み中 (
• ステータスがまだ不明な場合)
• 保護されたコンテンツのアウトレット (ユーザーが認証されている場合)
保護されていないルートにリダイレクトします (
• ユーザーが認証されていない場合)

これにより、(a) ユーザーが認証されていないことがわかる前に保護されたページに誤ってアクセスすること、および (b) ユーザーが認証されたことがわかる前にログイン ページに誤ってリダイレクトされることが防止されます。

＃＃＃例：＃＃＃ リーリー リーリー

ラッピングには保護された配線が必要です。

リーリー

Answer 2

これを行う 1 つの方法は、認可コンポーネントでコンポーネント ルーティングをラップすることです:

リーリー

ここでの目標は、Auth によって返された結果に基づいてルートを保護することです。 Auth がキャッチ ルートを選択した場合、ルーターを使用してユーザーを未承認のページに移動します。