时间戳

首页 > 解决方案 > 使用 Vue.js 和 FirebaseUI，身份验证成功后如何存储 authResult 对象？

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

问题描述

我正在我的 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>

标签： javascriptfirebasevue.jsfirebase-authenticationfirebaseui

解决方案

不是语境问题吗？请参阅何时使用 vm。或这个。在 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)
  }

推荐阅读