この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の6回目です。
5回目ではLaravel（API）から返却されたバリデーションメッセージをNext.js側で表示する方法を解説しました。
あわせて読みたい
TypeScript+Next.js+Laravelで簡易的なメモアプリ開発ハンズオン-5（バリデーションメッセージ表示）
この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の5回目です。 4回目ではメモ登録機能を実装し、このハンズオンで扱うメイン機能の実装…
- インデックスシグネチャ
- オブジェクト型のstateの複数要素を一括で更新する方法
等を解説しました。
今回はフロントエンド側での認証情報（ログインしているかどうか）の保持ができるようにしていき、画面によよって認証のある／ないでアクセス制御できるようにしていきます。
それでは早速実装に進んでいきます。
目次
現在の挙動確認
現在までの実装内容で認証情報周りの挙動を確認します。
現在は/でログイン画面にアクセスでき、そこからログインをすることができます。
本来、/memos（メモ一覧画面）、/memos/post（メモ登録画面）はログイン後にしかアクセスできないべきですが、現在はログインしていない状態で直接アクセスできてしまいます。
実際にURL欄に入力してアクセスしてみてください。
またログイン済みの場合はデベロッパーツールのApplicationタブからCookieを削除して、再度上記2つの画面にアクセスしてみてください。
- メモ一覧画面（
/memos）、メモ登録画面（/memos/post）には未ログイン状態でアクセスするとログイン画面（/）に遷移する - ログイン画面でログインした状態をフロントエンドで保持する
この2つを実装しています。
はじめに
本ハンズオンの全回分の買い切りプランはこちらに準備しております↓
TypeScript+Next.js+Laravelで超簡…
TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン（全回分） の記事一覧
「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の全回分をまとめて購入いただけるプランです。
コメント