ログアウト機能の実装【Vue.js】

今回の内容
・ログアウト機能を実装

今日の内容

ログアウト機能を実装する

ロスインでいて投稿するとができましたので、ログアウト機能を作ります。

まずは、ログアウトボタンを作ります。

<template>
  <div class="app-layout">
    <div class="sidebar">
      <p>チャンネル一覧</p>
      <p v-for="(channel, index) in channels" :key="index">
        <nuxt-link :to="'/channels/＄{channles.id}'">
          {{ channel.name }}</nuxt-link >
      </p>
     + <p class="logout">ログアウト</p>
    </div>
    <div class="main-content">
    <Nuxt />
    </div>
  </div>
</template>

<script>
~省略~
</script>
<style>
~省略~
+.logout {
  position: absolute;
  bottom: 10px;
  cursor: pointer;
}
</style>

ちゃんとログアウトボタンを表示させることが出来ましたので、次ボタンを押したらログアウトできるようにしていきます。

v-on:clickでログアウトボタンをクリックしたらlogoutメソッドを実行するようにします。

<p class="logout" v-on:click="logout">ログアウト</p>

そしたら次にmethodsでlogoutを定義しましょう。

firebase.auth().signOut()でログアウト出来ますが、これだけだと

<script>
import { db, firebase } from '~/plugins/firebase'

export default {
  data() {
    return {
      channels: [],
    }
  },
  mounted() {
    db.collection('channels')
      .get()
      .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          this.channels.push({ id: doc.id, ...doc.data() })
        })
      })
  },
  methods: {
    logout() {
      firebase
        .auth()
        .signOut()
        .then(() => {
          window.alert('ログアウトに成功！')
        })
        .catch((e) => {
          window.alert('ログアウトに失敗しました')
          // eslint-disable-next-line
          console.log(e)
        })
    },
  },
}
</script>

これでログアウトボタンをクリックすれば、ログアウトできると思います。

しかし、ログインしている時にだけログアウトできるようにしましょう。

<p v-if="isAuthenticated" class="logout" v-on:click="logout">ログアウト</p>

これでログイン状態だけの時にボタンを表示できるようになります。

あとはisAuthenticatedをcomputedで定義します。

<script>
import { db, firebase } from '~/plugins/firebase'

export default {
  data() {
    return {
      channels: [],
    }
  },
  computed: {
    isAuthenticated() {
      return this.$store.getters.isAuthenticated
    },
  },
  mounted() {
    db.collection('channels')
      .get()
      .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          this.channels.push({ id: doc.id, ...doc.data() })
        })
      })
  },
  methods: {
    logout() {
      firebase
        .auth()
        .signOut()
        .then(() => {
          window.alert('ログアウトに成功！')
        })
        .catch((e) => {
          window.alert('ログアウトに失敗しました')
          // eslint-disable-next-line
          console.log(e)
        })
    },
  },
}
</script>

無事にエラーが出ずにログアウトをすることは出来ましたが、ログアウトボタンとアイコンが表示されてしまっています。

これはStateの情報が残っているので、ログインしているとvueが判断してしまっています。

ログインに成功したらsetUserでstateのuserをnullにします。

<script>
import { mapActions } from 'vuex'
import { db, firebase } from '~/plugins/firebase'

export default {
  data() {
    return {
      channels: [],
    }
  },
  computed: {
    isAuthenticated() {
      return this.$store.getters.isAuthenticated
    },
  },
  mounted() {
    db.collection('channels')
      .get()
      .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          this.channels.push({ id: doc.id, ...doc.data() })
        })
      })
  },
  methods: {
    ...mapActions(['setUser']),
    logout() {
      firebase
        .auth()
        .signOut()
        .then(() => {
          this.setUser(null)
          window.alert('ログアウトに成功！')
        })
        .catch((e) => {
          window.alert('ログアウトに失敗しました')
          // eslint-disable-next-line
          console.log(e)
        })
    },
  },
}
</script>