
今回の内容
・ログアウト機能を実装
今日の内容
ログアウト機能を実装する
ロスインでいて投稿するとができましたので、ログアウト機能を作ります。
まずは、ログアウトボタンを作ります。
<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>

これで無事にログアウト出来ましたね。
一通りSlackの機能をつけることが出来ました!
下記が完成したSlackクローンです。
長かったけど、なんとか完成させることが出来ました。
まとめ
今日でSlackのクローンを完成させることが出来ました。
明日からはreactでwebサイトを作っていきたいので、Reactについて学習していこうと思います。
最後まで読んで頂き、ありがとうございました。