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

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

#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](https://qiita.com/Kyu-Taro/items/3dc90a6547d5e7b8207b)