【Nuxt.js,Firebase】ユーザー登録、ログイン実装④ログアウト機能　

#はじめに
こんにちは！
今回は[前回の記事](https://qiita.com/Yudai_35_/items/1f0d5de82e518f24b3a1)の続き、ログアウトの実装についてアウトプットしていきます！

#対象
・firebaseを使用してのユーザー登録、ログイン/ログアウト機能の実装を行いたい方
・[前回の記事](https://qiita.com/Yudai_35_/items/1f0d5de82e518f24b3a1)までの内容がお済みの方

##使用環境

|使用技術  |バージョン  |
|:-:|:-:|
|nuxt.js  |2.15.7 |
|firebase |9.6.1  |
|firebase-tools |9.23.3  |
|@nuxtjs/tailwindcss |4.2.0  |

##使用ファイル,概要

|ファイル名  |概要  |
|:-:|:-:|
|pages/top  |ログイン後表示TOPページ |
|components/MainHeader.vue  |ログイン後表示ヘッダー内容部分 |
|layouts/oftenuse.vue|ログイン後表示ヘッダー＆フッター |
|plugins/firerbase.js |firebase導入  |
|store/index.js |ログインデータの管理&保持  |

#store/index.jsでのログアウト機能

```javascript:store/index.js
export const state = () => ({
    user: {
        email: "",
        password: "",
        login: false
    }
});

export const mutations = {
    signOut(state) {
        state.user.email = "";
        state.user.password = "";
        state.user.login = false;
    }
};
```

#ログアウト機能の実装

```vuejs:components/MainHeader.vue
<template>
  <div
    class="header w-full bg-green-200 px-8 py-4 flex justify-between font-serif"
  >
    <h1>
      <a class="text-4xl hover:opacity-50 duration-1000">NewSelf</a>
    </h1>
    <ul class="flex justify-between items-center opacity-100 text-xl">
      <li>
        <nuxt-link to="/record">
          <a class="pr-8 hover:opacity-50 duration-1000">メモ</a>
        </nuxt-link>
      </li>
      <li>
        <nuxt-link to="/recordlist">
          <a class="pr-8 hover:opacity-50 duration-1000">メモ一覧</a>
        </nuxt-link>
      </li>
      <li>
        <nuxt-link to="/diagnose">
          <a class="pr-8 hover:opacity-50 duration-1000">診断</a>
        </nuxt-link>
      </li>
      <li>
        <nuxt-link to="/inquiry">
          <a class="pr-8 hover:opacity-50 duration-1000">お問い合わせ</a>
        </nuxt-link>
      </li>
      <li>
        <button @click="signOut" class="pr-5 hover:opacity-50 duration-1000">
          ログアウト
        </button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    signOut() {
      this.$auth
        .signOut()
        .then(() => {
          alert("ログアウトに成功しました");
          this.$store.commit("signOut");
          this.$router.push("/");
        })
        .catch((error) => {
          console.log(error);
          alert("ログアウトに失敗しました");
        });
    },
  },
};
</script>

```
・ログアウト機能の実装を行うときは`signOut`メソッドを使用します。（強制）
・ログイン成功後に表示されるページ（`MainHeader.vue`）のログアウトボタンをクリックすると'signOut'処理は発火。
・store/index.jsにある`mutations👉signOUt`の処理が働く。
email　＝　空の状態
password　＝　空の状態
login　＝　ログインしていない状態
になる。
・今回は`store/index.jsのmutationsの処理`を引っ張ってきているので、`MainHeader.vue`でのscriptでの処理は`this.$store.commit("signOut");`と表記する。
（mutations＝commit、actions＝dispatch）

#動作確認

①ログインページにアクセスしログインする
![スクリーンショット 2021-12-26 10.01.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/11e75e39-ea27-2ae2-d222-f900a557a2f2.png)
![スクリーンショット 2021-12-26 10.02.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/3f289410-ad0b-6571-40a9-1c4af8681f9b.png)

②TOPページへ移行されログアウトをクリック
![スクリーンショット 2021-12-26 10.03.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/dc294e23-1851-02e0-c2c1-9861de8219b7.png)
![スクリーンショット 2021-12-26 10.03.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/b54f3a4d-01ec-57a7-d309-d423bd4b1063.png)

③ログアウトに成功し、ログイン前のメインページで移動
![スクリーンショット 2021-12-26 10.03.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/6dd8e5db-9b6e-60da-75b1-693c22c7802b.png)


これでログアウトの動作が正常に働いていることが確認できました！

#まとめ
今回はログアウト機能の実装について記事にしました。次回に、
・middlewareを使用してのログインの判別

についてQiitにまとめていきます！

今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

最後までご愛読ありがとうございました！