Vue CLI × Laravel × VuetifyでCSSいらずの爆速開発でTodoリストを作る part5

#前回のパート
前回は、ログイン機能の実装とTodo.vueページの作成を行いました
今回はログアウト機能を実装していこうと思います
今回のパートで会員登録、ログイン、ログアウトの機能が揃いますのでようやく、Todoリストの機能実装に移れそうです
前回のパートはこちら→Vue CLI × Laravel × VuetifyでCSSいらずの爆速開発でTodoリストを作る part4

#Laravel側の実装
Laravel側の実装はルートの定義のみです
api.phpに下記のルートを追加してください

api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::post('/register', 'Auth\RegisterController@register')->name('register');
Route::post('/login', 'Auth\LoginController@login')->name('login');
Route::post('/logout', 'Auth\LoginController@logout')->name('logout');    //追加
Route::get('/user', function(){
    return Auth::user();
});

#Header.vueの編集
Header.vueでLogoutのクリックアクションを追加していきます
Header.vueで下記を追加してください

Header.vue

<template>
    <v-card color="grey lighten-4" flat height="200px" tile>
        <v-toolbar dense>
            <v-app-bar-nav-icon></v-app-bar-nav-icon>

            <v-toolbar-title>Todo-List</v-toolbar-title>

            <v-spacer></v-spacer>

            <router-link to="/signup">
                <v-btn icon>
                    <v-icon>mdi-account</v-icon>
                </v-btn>
            </router-link>

            <router-link to="/todo">
                <v-btn icon>
                    <v-icon>mdi-align-horizontal-left</v-icon>
                </v-btn>
            </router-link>

            <router-link to="/login">
                <v-btn icon>
                    <v-icon>mdi-login</v-icon>
                </v-btn>
            </router-link>

            <v-btn icon @click="logout">    //追加
                <v-icon>mdi-logout</v-icon>
            </v-btn>
        </v-toolbar>
    </v-card>
</template>

<script>    //追加
    export default {
        methods: {
            async logout() {
                await this.$store.dispatch('auth/logout');
                this.$router.push('/login');
            }
        }
    }
</script>

ヘッダーのLogoutのアイコンをクリックする事で、イベントを発火させ
logout()メソッドを呼び出す様に変更しました
次に、logout()で呼び出してるauth.js側の処理を追加していきます
auth.jsのアクションに下記を追加してください

auth.js

import axios from 'axios';

const state = {
    user: null
}

const getters = {
    user: state => state.user
}

const mutations = {
    setUser (state, user) {
        state.user = user;
    }
}

const actions = {
    async register({ commit }, data) {
        const response = await axios.post('/api/register', data)
        commit('setUser', response.data);
    },

    async searchUser({ commit }) {
        const response = await axios.get('/api/user');
        const user = response.data ? response.data : null;
        commit('setUser', user);
    },

    async login({ commit }, data) {
        const response = await axios.post('/api/login', data);
        commit('setUser', response.data);
    },

    async logout({ commit }) {    //追加
        await axios.post('/api/logout');
        commit('setUser', null);
    }
}

export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}

ここまでの実装で説明をしていきます

まず、Header.vueのログアウトアイコンがクリックされる事で
auth.jsのactionsであるlogout()が呼ばれます
logout()の中でLaravel側で定義した/logoutにルーティングされ、ログアウト処理が実行されます
ログアウト処理が完了したところで、commit('setUser', null)としてstateのUserを空にして
ログアウト状態である事にしています

ログアウト処理は以上になります
一度ログインを行い、その後ログアウトを行ってみてください
正常であれば、Login.vueのページに戻るはずです

#終わりに
今回はログアウト機能を作成しました
今回で会員登録からログイン、ログアウトと認証まわりの実装が全て終わりましたので
次のパートから、Todo.vueのTodoリストの実装に入っていこうと思います

次回のパートはこちら→Vue CLI × Laravel × VuetifyでCSSいらずの爆速開発でTodoリストを作る part6