Vue-router를 사용한 Firebase 인증 확인

Vue-router를 사용한 Firebase 인증 확인

문제는 vue-router의 beforeEnter가 main.js의 beforeCreate 훅보다 먼저 트리거되고 두 번째 지연이 발생하며 vuex 작업이 다시 로드된 후 사용자를 상태로 설정한다는 것입니다.그 결과 사용자는 로그인 페이지로 바운스됩니다.

vue-router's beforeviewvuex가 인증된 사용자를 상태로 설정할 때까지 체크를 어떻게 지연시킬 수 있습니다.

router.displaces

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import auth from './auth'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/reservations',
      name: 'Reservations',
      component: () => import('@/views/Reservation/Reservations.vue'),
      beforeEnter: auth
    }
  ]
})

auth.displays(인증)

import { store } from "../store";

export default (to, from, next) => {
    if(store.getters.user) {
        next()
    } else {
        console.log('auth')
        next('/signin')
    }
}

main.discloss.main.discloss.

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import {store} from './store'
import firebase from 'firebase/app'
import 'firebase/app'    
import config from './config'    
    
new Vue({
  router,
  store,
    render: h => h(App),
    beforeCreate() {
        firebase.initializeApp(config).firestore().settings({timestampsInSnapshots: true})
        console.log('main')     
        this.$store.dispatch('authCheck')   
    }
}).$mount('#app')

스토어/사용자.삭제

import firebase from 'firebase/app'
import 'firebase/auth'

export default{
    state: {
        user: null
    },
    mutations: {
        setUser (state, payload) {
      state.user = payload
        }       
  },
    actions: {
        authCheck({ commit }) {
            commit('setLoading', true)
            firebase.auth().onAuthStateChanged((user) => {              
                if(user){
                    commit('setUser', {
                        id: user.uid,
                        name: user.displayName,
                        email: user.email
                    })
                    commit('setLoading', false)
                }
            })
        },      
        logout({commit}) {
            firebase.auth().signOut()
            commit('setUser', null)
        }
    },
    getters: {
        user (state) {
            return state.user
        }
    }
}

콘솔에 먼저 beforeEnter check에서 auth, 다음으로 beforeCreate에서 main이 표시됩니다.라우터 체크 전에 'authCheck'를 트리거하는 방법

스토어를 감시하는 대신 auth.js 파일에서authStateChanged이벤트 후 파이어베이스에서 사용자를 수신하면 처리를 수행합니다.

auth.displays(인증)

export default (to, from, next) => {
  firebase.auth().onAuthStateChanged(function (user) {       
    if (user)         
      next();        
    else          
      next('/signin');        
  });
}

언급URL : https://stackoverflow.com/questions/51838543/firebase-auth-check-with-vue-router