试图让 firebase.auth().currentUser 成为一个承诺

Question

当用户登录时，我试图将他们发送到受限页面。所以我通过检查用户对象来保护路由。问题是当用户创建或登录时，auth 不会立即更改，因此在创建或登录后，firebase.auth().currentUser 可以在几毫秒内返回null。因此，如果我将它们发送到页面，它将返回错误。

这就是我试图让路由等待一段时间以查看身份验证是否更改的尝试。我想知道代码是否有任何问题或编写此代码的更好方法。

附：我知道我可以检查firebase.auth().onAuthStateChanged，但我不明白如何在用户创建或登录时使用它。它只是在后台运行，当身份验证更改时我不能只向用户发送路由没有语境。它也没有超时。

getUser( { commit } ) {
  return new Promise( ( resolve, reject )=> {
    let user, i = 0
    function checkForUser() {
      setTimeout( ()=> {
        i++
        user = firebase.auth().currentUser
        if ( user ) {
          router.push( { path: '/restricted' } )
          resolve()
        } else if ( i > 30 ) {
          reject( { message: 'Something went wrong, please try again.' } )
        } else {
          checkForUser()
        }
      }, 100 )
   }  
   checkForUser()
  } )
},

Answer 1

这是一个很长的答案，因为 Firebase 尚未就 https://github.com/firebase/firebase-js-sdk/issues/462 做任何事情

---

这是我过去的做法，在 Vuex 中同步用户。

为此，我有两个突变和一个方便的吸气剂，但那里没有什么特别的

state: {
  user: null
},
getters: {
  isAuthenticated: state => typeof state.user === 'object' && state.user !== null
},
mutations: {
  LOGIN: (state, user) => (state.user = user),
  LOGOUT: state => (state.user = null)
}

我有一个 firebase/index.js 文件，用于配置如下所示的 Firebase 应用程序

import firebase from 'firebase/app'
import 'firebase/auth'
// import any other Firebase libs like firestore, etc
import config from './config'
import store from '../store' // import the Vuex store

firebase.initializeApp(config)

export const auth = firebase.auth()
// export other Firebase bits like db, etc

const onAuthStateChangedPromise = new Promise((resolve, reject) => {
  auth.onAuthStateChanged(user => {
    store.commit(user !== null ? 'LOGIN' : 'LOGOUT', user)
    resolve(user)
  }, err => {
    reject(err)
  })
})

export const onAuthStateInit = () => onAuthStateChangedPromise

onAuthStateChanged 监听器使 store 与用户的 auth 状态保持同步，但外部 Promise 仅解析一次（随后对 resolve() 的调用将被忽略）。由于 Promise 的这一特性，onAuthStateChangedPromise 可用于检测 Firebase 身份验证系统何时完成其初始化阶段。

然后我将该承诺公开为一个名为 onAuthStateInit 的函数。

在我的路由器中，我使用名为 public 的 meta 标志来确定路由是否可公开访问（大多数路由没有它，这意味着它们需要身份验证）。

我的全局导航守卫看起来像这样

import { onAuthStateInit } from './firebase'

// define routes, new VueRouter, etc

router.beforeEach(async (to, from, next) => {
  await onAuthStateInit() // wait for auth system to initialise
  if (to.matched.every(route => route.meta.public) || store.getters.isAuthenticated) {
    next()
  } else {
    next({ name: 'sign-in' }) // redirect to sign-in page
  }
})

您可以在需要等待首页加载身份验证初始化完成的任何地方使用await onAuthStateInit()。您可以根据需要多次调用它，它只会等待一次。身份验证初始化完成后，此承诺将立即解决。

我的 sign-in 页面使用 Firebase 身份验证 UI，并定义了以下 回调

import firebase from 'firebase/app'
import * as firebaseui from 'firebaseui'
import { auth } from '../firebase'
import 'firebaseui/dist/firebaseui.css'

const ui = new firebaseui.auth.AuthUI(auth)

export default {
  mounted () {
    // the ref is just a <div> in my template
    const container = this.$refs.firebaseuiAuthContainer
    ui.start(container, { 
      // signInOptions, etc
      callbacks: {
        signInSuccessWithAuthResult: authResult => {
          this.$router.push({ name: 'home' }) // go to homepage or wherever
        },
        signInFailure: err => {
          // handle sign-in error
        }
      }
    })    
  }
}

您不必使用身份验证 UI。 onAuthStateChange 侦听器将捕获对当前用户身份验证状态的任何更改，因此您可以根据需要使用手动 auth.SignInWith*() 方法。

Answer 2

您可以将signInWithRedirect 方法与您选择的AuthProvider 以及getRedirectResult 方法一起使用。以 Google 为例：

firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        firebase.auth().getRedirectResult().then(function(result) {
            if (result.additionalUserInfo && result.additionalUserInfo.isNewUser) {
                // User just created.
            }
            if (result.user) {
                // User just signed in.
            }
        });
        // User is signed in.
    }
    else {
        // User is signed out.
        firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
    }
});

更多信息：https://firebase.google.com/docs/reference/js/firebase.auth.Auth#methods