【Vuex】Vue.jsでFirebaseを使ったログイン認証機能【Store】

前書き

Firebaseでは簡単にログイン認証が実現できるとのことなので、
即座に実装してみます。
Firebase関連の設定はこちらに記載しました。

melheaven.hatenadiary.jp

実装

./plugins/auth.js

LoginやLogoutに関する関数をauth.jsに定義します。
これにより他ファイルからメソッドとして引用することができます。

import firebase from 'firebase'

export function login (email, password) {
    return firebase.auth().signInWithEmailAndPassword(email, password)
}

export function logout() {
  return firebase.auth().signOut()
}

export function auth () {
    return new Promise(resolve => {
        firebase.auth().onAuthStateChanged(user => {
        resolve(user || false)
        })
    })
}

./plugins/auth_check.js

ここでは他のあらゆるVueファイルから現在ログインしているユーザーが誰なのか、
現在ログインできているか否かの情報を取得する為に、
Vuexを導入しました。

Vuexを使う場合、main.jsで以下の記述が必要です。

import store from './plugins/auth_check'
new Vue({
  vuetify: new Vuetify( {icons: {iconfont: 'md',}}),
  store,
  router,
  render: h => h(App),
}).$mount('#app')

Vuexではアプリケーションのstateを保存できるコンテナであるStoreを活用できます。

state

stateにて保持した情報は他のファイルから参照可能です。

getters

store.stateの情報を算出プロパティとして扱えます。
つまりstateにカウントなどの処理を施したい時に活用します。
自分はVueファイルでgettersを通して、stateの情報を呼ぶようにしています。
算出プロパティと同様にgettersの結果はstateに依存している事になります。

mutations

mutationsではstateの変更時に用いられます。
ここで定義したmutationsはeventに近い為、
Vueファイルやactionsでは"store.commit('mutationsで定義したハンドラ')"と記述します。
mutationsでは非同期処理を用いるべきでないそうです。（知らなかった）

actions

stateの変更に加え、mutaionsのcommitを行います。
非同期処理を含めた処理もこちらで記述します。
Vueファイルでは"store.dispatch('actionで定義したトリガー')"を記述します。

今回はactionsを使っていませんが、
stateには現在ログインしているか否か、
mutationsにはログイン時・ログアウト時にstateの変更を行いました。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        user: {},
        status: false
    },
    getters: {
        status: state => state.status,
        user: state => state.user,
    },
    mutations: {
        // mutationsのみstatusの更新を行う.
        onAuthStateChanged(state, user) {
            state.user = user; //firebaseが返したユーザー情報
          },

        onUserStatusChanged(state, status) {
            state.status = status; //ログインしてるかどうか true or false
        }
    }
})

Signin.vue

ログイン処理後にハンドラを呼び出し、
ログインを完了した時にRootへリダイレクトします。
computedでは現在ログイン状態をgettersで取得します。

export default {
  name: 'Signin',
  data () {
    return {
      email: '',
      password: '',
      redirect: '/',
    }
  },
  computed: {
      user() {
          return this.$store.getters.status;
      }
  },
 signIn() {
        login(this.email, this.password)    
        .then(() => {
            this.$store.commit('onUserStatusChanged', true);
            this.$router.push(this.redirect);
        })
        .catch(() => {
            alert('ログインできませんでした');
        })
    },

Loginフォーム