Question

我已经按照this教程为使用firebase Auth UI的登录用户创建了一个vue组件。但我一直在控制台中出错。我之前在非vue项目中使用了firebase预构建的UI，并使用了它的cdn。但我无法弄清楚用vueJS实现它的方法。任何帮助？

源代码userLogin.vue组件：

<template>
  <div id="userLogin">
    <h1 class="text-center">Login</h1>
      <div id="firebaseui-auth-container" style="margin-top:200px;"></div>
  </div>
</template>

<script>
import firebaseui from 'firebaseui';
import firebase from '../firebaseInit'

export default {
  name: 'userLogin',
  data() {
      return {
      }
  },
   mounted() {
    var uiConfig = {
      signInSuccessUrl: '/success',
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID
        ]
      };
    var ui = new firebaseui.auth.AuthUI(firebase.auth());
    ui.start('#firebaseui-auth-container', uiConfig);
    }
}
</script>

这是错误：

`[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'PROVIDER_ID' of undefined"

found in

---> <UserLogin> at src\components\userLogin.vue
       <App> at src\App.vue
         <Root>
warn @ vue.esm.js?efeb:576
logError @ vue.esm.js?efeb:1729
globalHandleError @ vue.esm.js?efeb:1724
handleError @ vue.esm.js?efeb:1713
callHook @ vue.esm.js?efeb:2912
insert @ vue.esm.js?efeb:4086
invokeInsertHook @ vue.esm.js?efeb:5853
patch @ vue.esm.js?efeb:6072
Vue._update @ vue.esm.js?efeb:2652
updateComponent @ vue.esm.js?efeb:2780
get @ vue.esm.js?efeb:3130
Watcher @ vue.esm.js?efeb:3119
mountComponent @ vue.esm.js?efeb:2787
Vue$3.$mount @ vue.esm.js?efeb:8407
Vue$3.$mount @ vue.esm.js?efeb:10747
Vue._init @ vue.esm.js?efeb:4559
Vue$3 @ vue.esm.js?efeb:4648
(anonymous) @ main.js?3479:17
./src/main.js @ app.js:6169
__webpack_require__ @ app.js:679
fn @ app.js:89
0 @ app.js:6194
__webpack_require__ @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
vue.esm.js?efeb:1733 TypeError: Cannot read property 'PROVIDER_ID' of undefined
    at VueComponent.mounted (userLogin.vue?e569:23)
    at callHook (vue.esm.js?efeb:2910)
    at Object.insert (vue.esm.js?efeb:4086)
    at invokeInsertHook (vue.esm.js?efeb:5853)
    at Vue$3.patch [as __patch__] (vue.esm.js?efeb:6072)
    at Vue$3.Vue._update (vue.esm.js?efeb:2652)
    at Vue$3.updateComponent (vue.esm.js?efeb:2780)
    at Watcher.get (vue.esm.js?efeb:3130)
    at new Watcher (vue.esm.js?efeb:3119)
    at mountComponent (vue.esm.js?efeb:2787)

节点版本：v8.9.4

Answer 1

您需要使用以下命令更新firebase软件包：

npm update -g firebase

然后检查您拥有的firebase版本，您可以执行此命令：

npm info firebase version

使用Vuejs的Firebase Auth UI

1 个答案: