挂载钩子中的错误："错误：AuthUI实例已经存在。"

Question

我正在使用Vuejs构建一个单页面应用程序，并使用Firebase进行身份验证。到目前为止，我已经成功实现了登录和注册功能。我现在遇到的问题是与社交身份验证相关的。

当我加载注册页面时，社交按钮会呈现出来，但是当我导航离开并返回注册页面时，会出现以下错误:

“mounted hook中的错误：“错误：AuthUI实例已经存在”

这时，社交按钮不再呈现。

以下是我的代码:

mounted () {
  SocialAuth () {
    const uiConfig = {
      signInSuccessUrl: '/',
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.TwitterAuthProvider.PROVIDER_ID
      ]
    }

    const ui = new firebaseui.auth.AuthUI(firebase.auth())
    ui.start('#firebaseui-auth-container', uiConfig)
  }
}

任何帮助和所有帮助都将不胜感激 :)

- KD1

Answer 1

你尝试使用firebaseui.auth.AuthUI.getInstance()吗，像这样：

mounted () {
  SocialAuth () {
    const uiConfig = {
      signInSuccessUrl: '/',
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.TwitterAuthProvider.PROVIDER_ID
      ]
    }

    if(firebaseui.auth.AuthUI.getInstance()) {
      const ui = firebaseui.auth.AuthUI.getInstance()
      ui.start('#firebaseui-auth-container', uiConfig)
    } else {
      const ui = new firebaseui.auth.AuthUI(firebase.auth())
      ui.start('#firebaseui-auth-container', uiConfig)
    }
  }
}

- Vivek Athalye

---

太棒了！非常感谢，看起来已经解决了 :) - KD1

谢谢，这帮助我解决了阻塞的问题。这段代码可以进一步简化为两行。 const ui = firebaseui.auth.AuthUI.getInstance() ?? new firebaseui.auth.AuthUI(firebase.auth()); ui.start('#firebaseui-auth-container', uiConfig); - undefined