Auth FlowとProtected Route
login状態、routeの保護、意図したpathの保存、基本的なroleチェックを含むシンプルなauth flowを作ります。
「Auth FlowとProtected Route」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
保護されたルートを使う理由
目標：サインイン済みのユーザーだけが必要とするページを保護します。
- 認証状態を追跡します
- ルートをガードします
- 本来の遷移先を記憶します
基本概念
- Auth store：ユーザーまたは null
- Guard：ユーザーがいなければログイン画面へ移動
- Post-login：保存した遷移先へ移動
Auth store のセットアップ
login/logout とシンプルなルーター状態を持つ小さな認証コンテキストを作成します。
<div id="root"></div>ガードと遷移先の記憶
ProtectedRoute で認証を確認します。認証情報がなければログイン画面を表示し、遷移先のルートを 保存 します。
<div id="root"></div>ロールベースのガード
role check を追加し、ユーザーに権限がなければ 403 メッセージを表示します。
<div id="root"></div>ヒントと注意点
- 認証状態が確定する前に、保護されたコンテンツを決してレンダーしないでください
- 本来の遷移先を保存し、ログイン後にそこへ移動します
- 401/403 のメッセージを分かりやすく表示します
保護されたルートの動作確認
振り返り
振り返り：認証ストアを保持し、保護されたルートをガードして、本来の遷移先を保存します。管理者専用エリアには、簡単なロールチェックも追加します。
よくある質問
「Auth FlowとProtected Route」レッスンは無料ですか？
はい。「Auth FlowとProtected Route」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「Auth FlowとProtected Route」で何を学びますか？
login状態、routeの保護、意図したpathの保存、基本的なroleチェックを含むシンプルなauth flowを作ります。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「Auth FlowとProtected Route」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Nested Layout、Loader（概念）、Prefetching
- Auth FlowとProtected Route
- Scroll RestorationとNot-Found Route