Udemyのオススメ講座はこちら 詳細を見てみる

TypeScript+Next.js+Laravelで簡易的なメモアプリ開発ハンズオン-6(Recoilを使った認証情報の保持)

  • URLをコピーしました!

この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の6回目です。

5回目ではLaravel(API)から返却されたバリデーションメッセージをNext.js側で表示する方法を解説しました。

  • インデックスシグネチャ
  • オブジェクト型のstateの複数要素を一括で更新する方法

等を解説しました。

今回はフロントエンド側での認証情報(ログインしているかどうか)の保持ができるようにしていき、画面によよって認証のある/ないでアクセス制御できるようにしていきます。

それでは早速実装に進んでいきます。

目次

現在の挙動確認

現在までの実装内容で認証情報周りの挙動を確認します。

現在は/でログイン画面にアクセスでき、そこからログインをすることができます。

本来、/memos(メモ一覧画面)、/memos/post(メモ登録画面)はログイン後にしかアクセスできないべきですが、現在はログインしていない状態で直接アクセスできてしまいます

実際にURL欄に入力してアクセスしてみてください。

またログイン済みの場合はデベロッパーツールのApplicationタブからCookieを削除して、再度上記2つの画面にアクセスしてみてください。

Cookieの削除方法
  • メモ一覧画面(/memos)、メモ登録画面(/memos/post)には未ログイン状態でアクセスするとログイン画面(/)に遷移する
  • ログイン画面でログインした状態をフロントエンドで保持する

この2つを実装しています。

はじめに

本ハンズオンの全回分の買い切りプランはこちらに準備しております↓

Udemyのオススメ講座はこちら↓

TypeScript+Next.js+Laravelハンズオンはこちら↓

デスク周りのオススメアイテムはこちら↓

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

ブログを開設するなら「SWELL」が絶対オススメ!

この記事を書いた人

大学院(機械工学)→重工業→エンジニア→プロダクトマネージャー(PdM)兼エンジニア

神戸で「つながる勉強会」を運営↓
https://tsunagaru-kobe.connpass.com/

神戸グルメのインスタアカウントを運用しています。

目次