使用 Vue.js 和 FirebaseUI，如何在成功验证后存储 authResult 对象？

Question

我正在 Vue.js 应用中使用 FirebaseUI 实现 Twitter 身份验证。

虽然我可以成功验证用户身份，但我不知道如何存储来自 AuthResult 对象的信息。

在我的父组件 (App.vue) 中，我侦听 onAuthStateChanged 事件以保存用户详细信息。这很好用，但用户对象不包含 Twitter 返回的 API 凭据。

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    this.user = user
    this.$router.push('/user')
  } else {
    this.$router.push('/login')
  }
})

这些凭据包含在 firebaseui.auth.AuthResult 对象中，可在名为 signInSuccessWithAuthResult.

的 FirebaseUI 回调中访问该对象

我面临的问题是我无法从此回调中调用 Vue.js 函数 - 我无法使用 this.foo 修改数据，我也无法通过此发出事件。 $发射。我可以 console.log() authResult 对象，仅此而已。

问：如何在我的 Vue 应用程序中保存 authResult 对象？

为清楚起见，这是我的子登录组件（简化模板）：

<template>
   <div>
      <div id="firebaseui-auth-container"></div>
   </div>
</template>

<script>
import firebase from 'firebase'
import * as firebaseui from 'firebaseui'
export default {
  name: 'Login',
  data () {
    return {
      foo: ''
    }
  },
  mounted () {
    var uiConfig = {
      signInOptions: [
        firebase.auth.TwitterAuthProvider.PROVIDER_ID
      ],
      signInFlow: 'popup',
      callbacks: {
        signInSuccessWithAuthResult: function (authResult) {
          // this.$emit('updateAuthResult', authResult)
          // this.foo = 'bar'
          console.log(authResult)
          return true
        }
      }
    }
    var ui = new firebaseui.auth.AuthUI(firebase.auth())
    ui.start('#firebaseui-auth-container', uiConfig)
  }
}
</script>

Answer 1

不会是上下文的问题吧？参见 When to Use vm. or this. in Vue.js

如果你这样做会发生什么：

mounted () {
    var vm = this
    var uiConfig = {
      signInOptions: [
        firebase.auth.TwitterAuthProvider.PROVIDER_ID
      ],
      signInFlow: 'popup',
      callbacks: {
        signInSuccessWithAuthResult: function (authResult) {
          vm.$emit('updateAuthResult', authResult)
          vm.foo = 'bar'
          console.log(authResult)
          return true
        }
      }
    }
    var ui = new firebaseui.auth.AuthUI(firebase.auth())
    ui.start('#firebaseui-auth-container', uiConfig)
  }

Answer 2

我想你可以使用箭头函数来解决这个问题

mounted () {
 var uiConfig = {
  signInOptions: [
    firebase.auth.TwitterAuthProvider.PROVIDER_ID
  ],
  signInFlow: 'popup',
  callbacks: {
    signInSuccessWithAuthResult: (authResult) => {
      this.$emit('updateAuthResult', authResult)
      console.log(authResult)
      return true
    }
  }
 }
 var ui = new firebaseui.auth.AuthUI(firebase.auth())
 ui.start('#firebaseui-auth-container', uiConfig)
}

使用 Vue.js 和 FirebaseUI，如何在成功验证后存储 authResult 对象？

With Vue.js and FirebaseUI, how to store the authResult object after a successful authentication?

javascript

firebase

vue.js

firebase-authentication

firebaseui