📖

Nuxt.jsでWebアプリケーション開発メモ11

に公開
Nuxt 3
Claude
tech

概要

ログイン状態チェック方法を変更。

  • JWTトークンで実施していたが、Cookieに保存する方式にしたのでCSRでチェックできない。その為、CSRで動作したとき適切にログイン状態チェックできていなかった。

プロンプト11

# 命令11
ログイン判定のmiddleware/auth.tsを全面的に変更して。
- SSR,CSRの判定は不要です。
- Djangoの`api/auth/user` REST APIでログイン判定してください。
- ログインしていなければログインページにリダイレクトするようにしてください。
- ログインページ以外のすべてのページに、このログインチェックが実施されるようにしてください。

対応内容

  • バックエンドへのREST API実行でログインチェックするようにした。
  • 各ページにmiddlewareを指定するのも煩わしいのでmiddleware/auth.tsをグローバル化。
    • middleware/auth.global.tsに変更。
    • Claude Codeは当初、nuxt.config.tsにrouter.middleware: ['auth'] を追加する方法を採ったがChatGPTに聞いたらそれはNuxt2の方式とのことなので、叱る。

ソースコード差分

https://github.com/tkure/prototype-frontend/commit/089a6c1ca888d4270e65f2fb61ac7ff51b1b1b65

→ Nuxt.jsでWebアプリケーション開発メモ12

Discussion