PROGRAMMING

ログアウト機能の実装【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>

そしたら次にmethodslogoutを定義しましょう。

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>

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

あとはisAuthenticatedcomputedで定義します。

<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が判断してしまっています。

ログインに成功したらsetUserstateusernullにします。

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

これで無事にログアウト出来ましたね。

一通りSlackの機能をつけることが出来ました!

下記が完成したSlackクローンです。

長かったけど、なんとか完成させることが出来ました。

まとめ

今日でSlackのクローンを完成させることが出来ました。

明日からはreactでwebサイトを作っていきたいので、Reactについて学習していこうと思います。

最後まで読んで頂き、ありがとうございました。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.