Firebase 인증 상태를 vuex로 저장

개시하다

이번에 Firebase를 사용하여 간단한 앱을 만들었는데 구글 인증 후의 상태를 유지하는 것이 상당히 까다롭기 때문에 비망록으로 보존하였다.

문제점

Google 인증을 통해 로그인한 후 다시 불러오면 인증 상태가 사라집니다.

해결 프로그램

1. firebaseの認証状態の設定をする
2. store.jsにて認証状態を取得するmutation及びactionの作成、stateで状態管理
3. 認証状態が必要なページでactionから取得する

Firebase 구성

일단 Firebase.js에서 인증 상태의 지속성을 설정합니다.
firebase

import firebase from 'firebase'

if (!firebase.apps.length) {
  firebase.initializeApp(
    {
      apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
      authDomain: "xxxxxxxxxxxxxx.firebaseapp.com",
      databaseURL: "https://xxxxxxxxxxxxxx.firebaseio.com",
      projectId: "xxxxxxxxxxxxxxx",
      storageBucket: "xxxxxxxxxxxxxxxxxx.appspot.com",
      messagingSenderId: "xxxxxxxxxxxxxxx",
      appId: "xxxxxxxxxxxxxxxxxxxxxxxxxx"
    }
  )
 // 今回は現在のセッションまたはタブでのみ状態が保持される設定 
 　firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION).then(() => {
    console.log('Initialized!') // 確認用のメッセージ
  })
}

export default firebase

action,mutation의 제작 +state 관리 인증 상태

그런 다음 Store에서 인증 상태의 action, mutation을 만듭니다.
store

export const actions = {
  login({ commit }) {
    const provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider).then((result) => {
      const user = result.user
      commit('loginStateChange', true)
      console.log('Login was successful')
      commit('setUserUid', user.uid)
      commit('setUserName', user.displayName)
      this.$router.push('/dashboard')
    }).catch((error) => {
      const errorCode = error.code
      console.log('error : ' + errorCode)
    });
  },
  // 認証状態の取得をするaction
  onAuth({ commit }) {
    firebase.auth().onAuthStateChanged(user => {
      user = user ? user : {}
      commit('setUserUid', user.uid)
      commit('loginStatusChange', user.uid ? true : false)
    })
  },
  ...
}

store

export const mutations = {
  loginStatusChange(state, status) { // 認証状態を双方向に変化
    state.loggedIn = status
  },
  setUserUid(state, userUid) { // user_uidの取得
    state.userUid = userUid
  },
}

store

export const state = () => ({
  userUid: '',
  loggedIn: false,
})

인증 상태 가져오기

그리고 인증 상태를 얻으려는 페이지에서cread를 사용하여 미리 가져옵니다.
index

<script>
export default {
  ...
  created() {
    this.$store.dispatch('onAuth')
  },
}
</script>

이렇게 하면 재부팅을 하더라도 인증 상태는 계속해야 한다.더 좋은 방법이 있다면 꼭 메시지를 남겨주세요.

참고 자료

인증 상태의 지속성
Vue vuex에서 Firebase 로그인 유지