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

前回まででユーザーの新規登録回りの処理が実装できたので、今回は登録済みユーザー情報の変更処理を実装していきます。

ユーザー情報変更処理の実装

ユーザー情報変更ページの作成

pagesディレクトリにprofile.vueという名前でファイルを作り、適当にユーザー情報変更用のフォームを作ります。こんな感じに作ってみました。

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

解説

14-15行目:初期値にログイン中のユーザー情報をセットします。

22行目:CSRFの初期化をしています。

23行目:ユーザー情報の更新依頼をputしています。

cors対策

config\cors.phpのpathsに'user/profile-information'を追加します。

ユーザー情報の更新

この状態で更新するとちゃんとリクエストされDBも更新されますがクライアント側の情報は更新されません。更新後にfetchUserメソッドを実行し反映されるようにします。

更新が反映されるようになりました。

最後に

Laravel側はほとんどいじることなくユーザー情報の更新処理を実装することが出来ました。 次回はページをプロテクトする処理を実装してみようと思います。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です