【Nuxt.js】firebase基礎編(Auth版)：ログアウトしよう

Contents

前置き
ログアウト
ログインも含めたコード
まとめ

前置き

Firebase Authenticationシリーズです💫
今回はログアウトのコードですが
ログインやアカウント作成など
前段階は別記事で解説しております🍎👩‍🏫

【Nuxt.js】firebase基礎編(Auth版)：メールアドレスログインをできるようにしよう
 【Nuxt.js】firebase基礎編(Auth版)：Twitterログインをできるようにしよう
 【Nuxt.js】firebase基礎編(Auth版)：facebookログインをできるようにしよう
 【Nuxt.js】firebase基礎編(Auth版)：Googleログインをできるようにしよう

【Nuxt.js】firebase基礎編(Auth版)：アカウント作成をできるようにしよう

ログアウト

ログインできている前提で
ログアウトだけのコードです✍️

signOut()メソッドを使用します。
storeにログイン情報を保持するので
ログアウトもVuexで行います。

<template>
  <div class="page">
    <button @click="logOut">logout</button>
  </div>
</template>

<script>
export default {
  methods: {
    logOut () {
      this.$store.dispatch('logOut')
    },
  },
}
</script>

<button @click="logOut">logout</button>

</div>

</template>

export default {

methods: {

logOut () {

this.$store.dispatch('logOut')

}

</script>

import firebase from '@/plugins/firebase'

export const actions = {
  logout ({ context }) {
    firebase.auth().signOut()
      .then(()=> {
        console.log('ログアウト')
      })
      .catch((error) => {
        console.log(error)
      })
  },
}

import firebase from '@/plugins/firebase'

export const actions = {

logout ({ context }) {

firebase.auth().signOut()

.then(()=> {

console.log('ログアウト')

})

.catch((error) => {

console.log(error)

})

}

ログインも含めたコード

前置きに貼っている
記事リンクで解説済みのため
ここでは記載しません💡

⬇️displayName(表示名)は必須ではないです。
　やりたい方はこちらをご覧ください✨👀
【Nuxt.js】firebase基礎編(Auth版)：アカウント作成時に表示名を登録しよう

<template>
  <div class="page">
    <div class="user">
      <p class="user">user.uid: {{ user.uid }}</p>
      <p class="user">user.email: {{ user.email }}</p>
      <p class="user">user.name: {{ user.name }}</p>
    </div>
    <button @click="logout">logout</button>
    <form
      class="login-form"
      @submit.prevent
    >
      <label class="label">
        <span class="label">
          email
        </span>
        <input
          class="input"
          type="text"
          v-model="email"
        >
      </label>
      <label class="label">
        <span class="label">
          password
        </span>
        <input
          class="input"
          type="password"
          v-model="password"
        >
      </label>
      <button
        class="button"
        type="submit"
        @click="login"
      >
        Login
      </button>
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      email: '',
      password: '',
    }
  },
  computed: {
    user () {
      return this.$store.getters['user']
    },
  },
  methods: {
    logout () {
      this.$store.dispatch('logout')
    },
    login(email, password) {
      this.$store.dispatch('login', {email: this.email, password: this.password})
    },
  },
}
</script>

<p class="user">user.email: {{ user.email }}</p>

</div>

<button @click="logout">logout</button>

<form

class="login-form"

@submit.prevent

</span>

<input

class="input"

type="text"

v-model="email"

</label>

password

</span>

<input

class="input"

type="password"

v-model="password"

</label>

<button

class="button"

type="submit"

@click="login"

</button>

</form>

</div>

</template>

export default {

data () {

return {

email: '',

password: '',

}

computed: {

user () {

return this.$store.getters['user']

methods: {

logout () {

this.$store.dispatch('logout')

this.$store.dispatch('login', {email: this.email, password: this.password})

}

</script>

import firebase from '@/plugins/firebase'

export const state = () => ({
  user: {
    uid: '',
    email: '',
    name: '',
  },
})

export const getters = {
  user: state => {
    return state.user
  }
}

export const actions = {
  login({ dispatch }, payload) {
    firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
      .then(user => {
        console.log('成功！')
        dispatch('checkLogin')
      }).catch((error) => {
        alert(error)
      })
  },
  checkLogin({ commit }) {
    firebase.auth().onAuthStateChanged(function (user) {
      if (user) {
        console.log(user)
        commit('getData', { uid: user.uid, email: user.email, name: user.displayName })
      }
    })
  },
  logout ({ commit }) {
    firebase.auth().signOut()
      .then(()=> {
        console.log('ログアウト')
        commit('logOut')
      })
      .catch((error) => {
        console.log(error)
      })
  },
}

export const mutations = {
  getData (state, user) {
    state.user = user
  },
  logOut (state) {
    state.user = ''
  },
}

import firebase from '@/plugins/firebase'

export const state = () => ({

user: {

uid: '',

email: '',

name: '',

})

export const getters = {

user: state => {

return state.user

}

export const actions = {

firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)

.then(user => {

console.log('成功！')

dispatch('checkLogin')

}).catch((error) => {

alert(error)

})

checkLogin({ commit }) {

firebase.auth().onAuthStateChanged(function (user) {

if (user) {

console.log(user)

commit('getData', { uid: user.uid, email: user.email, name: user.displayName })

}

})

logout ({ commit }) {

firebase.auth().signOut()

.then(()=> {

console.log('ログアウト')

commit('logOut')

})

.catch((error) => {

console.log(error)

})

}

export const mutations = {

getData (state, user) {

state.user = user

logOut (state) {

state.user = ''

}

まとめ

今までの記事で
firebaseとVuexに
慣れている方は
「え？これだけでいいの？😳」
と驚くかもしれません😀笑

Vuexにまだ慣れていない方でも
firebaseを扱うと一気になれるので
オススメですよ👍✨
ぜひfirebaseAuthだけでなく
Cloud Firestoreなども
使用してみてください❤️
【Nuxt.js】firebase導入編(Firestore版)：データの追加取得をしよう