Firebase의 익명 인증을 vuex로 구현해 보자.

vuex에서 Firebase 익명 인증을 구현했으므로 샘플로 게시해 보겠습니다.

결국 '$store.getters.uid'에서
언제 어디서나 uid를 낼 수 있도록 하는 것이 목적입니다.

환경 · VueCLI3.0

store.js

state: {
    login_user: null
},
mutations: {
    setLoginUser (state, user) {
      state.login_user = user
    },
    deleteLoginUser (state) {
      state.login_user = null
    },
},

actions: {
    setLoginUser ( { commit }, user) {
      commit('setLoginUser', user)
    },
    deleteLoginUser ( { commit } ){
      commit('deleteLoginUser')
    },
    logout(){
      firebase.auth().signOut()
    },
    login(){
      firebase.auth().signInAnonymously().catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // ...
      });
    },
},

getters: {
    uid: state => state.login_user ? state.login_user.uid : null
}

app.vue

<template>
    <v-icon @click="login">mdi-square-edit-outline</v-icon>
</template>

<script>
import firebase from 'firebase'
import { mapActions } from 'vuex'
import { mapGetters } from 'vuex'

export default {
  created() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.setLoginUser(user)
      } else {
        this.deleteLoginUser()
      }
    })
  },
  methods: {
    ...mapActions(['login','setLoginUser','logout','deleteLoginUser']),
    ...mapGetters(['uid'])
  },
}
</script>

거의 copipe에서 사용할 수 있다고 생각합니다!

그리고는, Firebase의 콘솔로 로그인 방법을 유효하게 하면 인증해 줍니다!



약간 해설을 하면,

action으로 정의한 login을 점화하면,

app.vue의 created에 있는 firebase.auth().onAuthStateChanged

가 발동해 user 객체로부터 데이터를 취득해, 뮤테이션등을 개입시켜 최종적으로 getters로 uid를 어디에서나 취득할 수 있게 됩니다.

왜 발동하는가라고 하면, 공식적으로 「발동해요☆」라고 써 있으므로 발동합니다(체육 회계의 사고)

이상입니다!

참고 · htps : // 푹 빠져라. 오, ぇ. 이 m/도 cs/아우 th/우아 b/그 ny 이미 s-아우 th? hl = 그럼