Firebase Auth 및 Vue-router

Question

firebase를 사용하여 Vue.js 앱을 인증하려고합니다.

로그인하는 동안 직접 로그인 보호 URL에 액세스하려고하면 firebase.js가 인증 응답을 반환하기 전에 라우터가로드하고 인증 상태를 확인합니다. 이로 인해 사용자는 이미 로그인 한 상태에서 로그인 페이지로 되돌아갑니다.

firebase에서 인증 상태가 검색 될 때까지 vue-router 탐색을 어떻게 지연합니까? 파이어 폭스가 auth 데이터를 localStorage에 저장한다는 것을 알 수 있습니다. 예비 인증 검사로 존재하는지 여부를 확인하는 것이 안전할까요? 궁극적으로 최종 결과는 사용자가 인증되는 동안 로딩 스피너 또는 무언가를 표시 한 다음 탐색 한 페이지에 액세스 할 수 있어야합니다.

라우터 /하는 index.js

let router = new Router({ 
    mode: 'history', 
    routes: [ 
    { 
     path: '/', 
     name: 'Home', 
     component: Home 
    }, 
    { 
     path: '/login', 
     name: 'Login', 
     component: Login 
    }, 
    { 
     path: '/example', 
     name: 'Example', 
     component: Example, 
     beforeEnter: loginRequired 
    } 
}) 

function loginRequired (to, from, next) { 
    if (authService.authenticated()) { 
    next() 
    } else { 
    next('/login') 
    } 
} 

auth.js

import * as firebase from 'firebase' 

var config = { 
    // firebase config 
} 

firebase.initializeApp(config) 

var authService = { 

    firebase: firebase, 
    user: null, 

    authenticated() { 
    if (this.user == null) { 
     return false 
    } else { 
     return !this.user.isAnonymous 
    } 
    }, 

    setUser (user) { 
    this.user = user 
    }, 

    login (email, password) { 
    return this.firebase.auth().signInWithEmailAndPassword(email, password) 
     .then(user => { 
     this.setUser(user) 
     }) 
    }, 

    logout() { 
    this.firebase.auth().signOut().then(() => { 
     console.log('logout done') 
    }) 
    } 
} 

firebase.auth().onAuthStateChanged(user => { 
    authService.setUser(user) 
}) 

export default authService 

app.vue 중포 기지는 항상 시작에 인증 상태 변경 이벤트를 트리거하지만 즉각적인 아니다

<template> 
    <div id="app"> 
    <p v-if="auth.user !== null">Logged in with {{ auth.user.email }}</p> 
    <p v-else>not logged in</p> 
    <router-view v-if="auth.user !== null"></router-view> 
    </div> 
</template> 

<script> 
import authService from './auth' 

export default { 
    name: 'app', 
    data() { 
    return { 
     auth: authService 
    } 
    } 
} 
</script> 

Answer 1

.

Firebase가 사용자/인증 초기화를 완료하기를 기다리려면 을 반환해야합니다.

const initializeAuth = new Promise(resolve => { 
    // this adds a hook for the initial auth-change event 
    firebase.auth().onAuthStateChanged(user => { 
    authService.setUser(user) 
    resolve(user) 
    }) 
}) 

const authService = { 

    user: null, 

    authenticated() { 
    return initializeAuth.then(user => { 
     return user && !user.isAnonymous 
    }) 
    }, 

    setUser (user) { 
    this.user = user 
    }, 

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

    logout() { 
    firebase.auth().signOut().then(() => { 
     console.log('logout done') 
    }) 
    } 
} 

이 이미 initializeAuth 약속에 의해 처리되는 바와 같이, signInWith... 약속에서 setUser를 호출 할 필요가 없습니다.