Laravel+Sanctum+FortifyとNuxt.js+nuxt/authでSPAの認証処理を実装する【ユーザー削除編】

前回まででユーザー情報の作成・変更処理が一通り実装できたので、最後にユーザー情報をする処理を実装していきます。

ユーザー削除処理の実装

ユーザー情報削除ページの作成

pagesディレクトリにdelete.vueという名前でファイルを作り、適当にユーザー情報削除用のフォームを作ります。こんな感じに作ってみました。 削除ボタンがひとつあり、api/userにdeleteメソッドを投げるだけです。

見た目はこんな感じになります。

ユーザー情報削除ルートの作成

routes/api.phpファイルを次の様に編集します。26-28行目でuserを削除するルートを追加し、’password.confirm’のミドルウェアを指定しています。ボタンクリックだけでユーザーアカウントの削除を実行してしまうのは危険なのでパスワードの確認をさせることにしました。

テスト実行

このままdelete.vueの画面で削除ボタンを実行するとdeleteメソッドの応答で”Password confirmation required.”と返ってくるので、期待通りにpassword.confirmのミドルウェアが設定されていることが確認できました。

パスワード確認処理の実装

それではパスワード確認のために必要な処理を実装していきます。

パスワードの確認ページの作成

pagesディレクトリにconfirm-password.vueという名前でファイルを作り、適当にパスワード確認用のフォームを作ります。こんな感じに作ってみました。パスワードの入力欄がひとつあり、Fortifyが用意してくれているuser/confirm-passwordにpostメソッドを投げるだけです。その後、delete.vueに移動させています。

見た目はこんな感じになります。

MEMO
このページからは様々なページから使用される可能性があるので、戻り先はdelete.vueへ固定ではなく、URLパラメータなどで戻り先を指定してあげるようにするとより良いですが、ここではdelete.vue固定としておきます。

ユーザー情報削除ページの修正

12行目で、api/userページに削除リクエストを投げ、16-18行目で423が返ってきたらconfirm-passwordページに遷移するようにします。

MEMO
この辺りはaxiosのプラグインでも作って共通化した方が便利ですが、そのままこのページ内に書いてしまいます。

cors対策

config\cors.phpのpathsに’user/confirm-password’を追加します。

実行

これで実装できましたので実行してみます。以下の様な動作になります。

最後に

これでユーザーの認証に関する一通りの処理が実装できました。Laravel+Sanctum+FortifyとNuxt.js+nuxt/authの構成をとることで、自前で書かなければならない処理がかなり減らせることが確認できたと思います。

後は自分の好きなようにWebアプリケーションを実行するだけです。誰かのお役に立てたら幸いです。

コメントを残す

メールアドレスが公開されることはありません。