javascript - 使用 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 修改数据，也无法使用 this.$emit 发出事件。我可以 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)
  }