はじめに

「Laravel+SPA+JTWAuthで認証ありの投稿アプリをつくる」シリーズでユーザー情報を変更する仕組みを実装したので紹介します。

前提

Laravel5.5
Vagrant環境
認証はJTWAuth使用
SPAはVue、Vue Router

前回のパート１、２、3の続き
パート1　https://qiita.com/ProgramingDai/items/403ee4fbc0971827f160
パート２　https://qiita.com/ProgramingDai/items/dd14e02b804be1ed5516
パート3
https://qiita.com/ProgramingDai/items/1bd3b21fe97b15d152a0#_reference-94a2c9d5b26f4d09adc8

今回作るもの

ユーザー情報変更をSPAで実装

1.User.vue丸ごと書き換え

resources/asset/js/components/pages/User.vue

<template>
    <div class="container">
        <div v-if="!editFlg">
            ID: {{ user.id }}<br />
            ユーザー名: {{ user.name }}<br />
            メール: {{ user.email }}<br />
            登録日: {{ user.created_at }}<br />
            更新日: {{ user.updated_at }}
        </div>

        <form v-else>
            <input type="text" name="name" v-model="user.name">
            <input type="email" name="email" v-model="user.email">
        </form>
        <button v-if="!editFlg" @click="(editFlg = true)">編集</button>
        <button v-else @click="onUpdate">更新</button>

    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                isError: false,
                user: {},
                editFlg: false,
                updated: false
            }
        },
        created() {
            axios.get('/api/me').then(res => {
                this.user = res.data;
            }).catch(error => {
                this.isError = true;
            });
        },
        methods: {
             onUpdate: function() {
                 axios.put('/api/users/' + this.user.id, {
                     name: this.user.name,
                     email: this.user.email,
                 })
                 .then( (res) => {
                     this.editFlg = false;
                     this.updated = true;
                     console.log('update')
                 }).catch(error => {
                     this.isError = true;
                 });
             }
         },
    }
</script>

ただしこのまま変更するとパスワードが空文字になってしまうため
UserContorollerを一部変更する必要があります。

2.UserContoroller一部修正

app/Http/Controllers/UserController

// 中略

    // 更新
    public function update(Request $request, User $user) {
        $user->name = $request->input('name');
        $user->email = $request->input('email');

        // 追加 パスワードリクエストがあったら更新（なければ何もしない）
        if($request->input('password')) {
            $user->password = bcrypt($request->input('password'));
        }

        $user->save();
    }

// 中略

こちらでこちらでパスワードが意図なく書き換わることは防げるかと思います。