Zenn
🦔

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

に公開
Django
CSRF
Nuxt 3
Claude
tech

概要

ユーザー追加画面を追加。

プロンプト13

# 命令13
ユーザー追加画面を追加してください。
- user.vueの新規追加ボタンをクリックすると、ユーザー追加画面に遷移します。
- ユーザー追加画面は管理者権限を持つユーザーのみがアクセスできます。管理者権限を持たないユーザーの場合はuser.vueと同様にPermission Deniedのみ表示させてください。
- ユーザー追加画面にはユーザー追加のためのフォームがあり、api_customuserテーブルの列相当の入力ボックスを備えてください。
    - ただし、idは自動裁判なのでフォームには不要です。また、is_staff、is_activeもフォームにお不要で保存する場合に必ずTrueになるようバックエンド側で制御してください。
- csrfトークンを用いてセキュリティも担保するようにしてください。

追加命令

  • csrfトークンによるセキュリティ担保はなしとします。(理由は後述)
  • ユーザー追加画面のURLに遷移してもユーザー一覧画面が表示されるので、ページ構成を見直し。
    • pages/admin/user.vueをpages/admin/user/index.vueに修正。
    • 追加画面はpages/admin/user/add.vueとしている。
  • 画面がいまいちだったので、Figmaで軽くデザインして画面構成を修正。
  • 他、手動でpaddingなどを修正。

画面

対応内容

  • pages/admin/user/add.vueを追加。
  • ページ一覧の配置パスをpages/admin/user.vue→pages/admin/user/index.vueに修正。

ソース差分

バックエンド

https://github.com/tkure/prototype-backend/commit/c2a6c7d219d646107254955268842a6a8f9e3e6d

フロントエンド

https://github.com/tkure/prototype-frontend/commit/4f9b5fba28a7eb32e523ef24dbd1cd47395883f7

CSRFトークンを利用しない理由をChatGPTにまとめさせた

https://zenn.dev/yduts_eruc/articles/b4e7cb0a0b75c6#nuxt%2Bdrfでのcsrf対策

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

Discussion