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

#はじめに
こんにちは！
今回は前回の記事の続き、ログアウトの実装についてアウトプットしていきます！

#対象
・firebaseを使用してのユーザー登録、ログイン/ログアウト機能の実装を行いたい方
・前回の記事までの内容がお済みの方

##使用環境

使用技術	バージョン
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でのログアウト機能

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;
    }
};

#ログアウト機能の実装

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）

#動作確認

①ログインページにアクセスしログインする

②TOPページへ移行されログアウトをクリック

③ログアウトに成功し、ログイン前のメインページで移動

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

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

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

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

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