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

概要

tokenをlocalstorage保存ではなくhttpOnlyのCookie保存方式に変更する。
なんか色々不備があったのでいったんコミットしたがresetしてやりなおした

プロンプト9(ボツバージョン)

# 命令9
tokenをlocalstorageではなくhttpOnly Cookie方式に変更してください。

プロンプト9(やりなおし)

# 命令9(やりなおし)
tokenをlocalstorageではなくhttpOnly Cookie方式に変更してください。
- cookieへの保存はDjango側で実施してください。(httponlyあり)
- nuxt側では読み取りのみとします。
- jwtにis_adminの情報を追加してください。
    - このあと、nuxt側でページ遷移の権限チェックをjwtのペイロードで実施する想定（まだやらなくてよい）です。必要と思われる情報は全部ペイロードに含むようにしてください。

対応内容

バックエンド(Django)

• ログイン時にJWTトークンをCookieに保存する。
• REST API実行時にトークンをCookieから読み取るためにカスタムJWTAuthenticationを実装。

フロントエンド(Nuxt)

• Nuxt側ではJWTは読み取りのみ実施。
• middlewareで権限チェックする際、SSR処理、CSR処理の両方で動いてしまう。useCookieでトークンを読み取れるのはSSR処理時のみなのでimport.meta.serverチェックでSSR時のみ動作するようにした。
  • SSR処理でCookieから権限情報を取得して、CSR処理側で情報共有するためuseStateを使用した。
• ログインしたとき、ヘッダの右上アイコンが表示されないデグレ発生。
  • → middlewareでCSR処理時にトークン取得できないので権限情報が正しく反映されない。
    • → ログインのレスポンスでトークン取得できるのでその情報を使うようにした。（Claude Code以外と見落とし多い。）

ソース差分

フロントエンド

• https://github.com/tkure/prototype-frontend/commit/09b251115dd5ef21d1eb572f0f62be122d676b3f
• https://github.com/tkure/prototype-frontend/commit/d8da815d2f630251e24b0723bce1e9aea06aad95
• https://github.com/tkure/prototype-frontend/commit/0b09fdc77eecefbb637ed5fd7106a6f0662ebc67
• https://github.com/tkure/prototype-frontend/commit/66ea6660fc8b5d26b7dcf26ab03d38251ef4e8fd

バックエンド

• https://github.com/tkure/prototype-backend/commit/87ecc64860f38faebb4a2f4678a13407fc55b1b8
• https://github.com/tkure/prototype-backend/commit/57b26191ae0344fc010a72580f46bd5a5d9349c3

---

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