firebase 工作但 firebase.auth() 在 Vue.js 中不起作用答案

【问题标题】：firebase working but firebase.auth() not working in Vue.jsfirebase 工作但 firebase.auth() 在 Vue.js 中不起作用
【发布时间】：2022-08-08 06:10:43
【问题描述】：

我跑了

npm i firebase

并且有

import firebase from \'firebase/compat/app\'

但是当我跑步时

console.log(firebase.auth())

我收到一条错误消息

app.js:280 Uncaught FirebaseError: Firebase: No Firebase App \'[DEFAULT]\' has been created - call Firebase App.initializeApp() (app-compat/no-app).
    at app (firebaseNamespaceCore.ts?1484:102:1)
    at Object.serviceNamespace [as auth] (firebaseNamespaceCore.ts?1484:152:1)
    at eval (HelloWorld.vue?e90b:24:1)
    at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:30:1)
    at __webpack_require__ (app.js:277:33)
    at fn (app.js:517:21)
    at eval (HelloWorld.vue?vue&type=script&lang=js:5:213)
    at Module../src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:140:1)
    at __webpack_require__ (app.js:277:33)
    at fn (app.js:517:21)

但是，当我只运行 console.log(firebase) 时，我会在控制台中得到正确的数据输出。我还按照here 的记录正确设置了 firebase，但 firebause.auth() 仍然无法正常工作。我在 Vue3 工作，但我认为那部分并不重要，仍在努力寻找解决方案。

我目前正在尝试让 firebaseUI 工作，这是我陷入困境的步骤。一旦我能够让 firebause.auth() 工作，我将能够通过运行初始化 firebaseUI 小部件：

var ui = new firebaseui.auth.AuthUI(firebase.auth());

我的 ./src/firebaseConfig.js 代码：

import { initializeApp } from \"firebase/app\";

const firebaseConfig = {
  apiKey: \"code\",
  authDomain: \"code\",
  projectId: \"code\",
  storageBucket: \"code\",
  messagingSenderId: \"code\",
  appId: \"code\",
  measurementId: \"code\"
};

const firebaseApp = initializeApp(firebaseConfig);
export default firebaseApp

我在 ./src/components/Helloworld.vue 中使用 firebase Config.js 的组件文件：

<template>
  <div class=\"hello\">
    <h1>{{ msg }}</h1>
    <div id=\"sign-in-status\"></div>
    <div id=\"sign-in\"></div>
    <pre id=\"account-details\"></pre>
  </div>
</template>

<script>
import firebaseConfig from \'../firebaseConfig\';

import firebase from \'firebase/compat/app\';
import * as firebaseui from \'firebaseui\'
import \'firebaseui/dist/firebaseui.css\'

console.log(firebaseConfig);
console.log(firebase);

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui




export default {
  name: \'HelloWorld\',
  props: {
    msg: String
  },
}
</script>

<!-- Add \"scoped\" attribute to limit CSS to this component only -->
<style scoped>
</style>

两个都

console.log(firebaseConfig);
console.log(firebase);

有效，但

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui

在上面复制并粘贴时会产生错误。

我应该在我的 vue.js 代码中指定如何使用它吗？希望这个问题可以更通用地解决。我将 firebase 配置文件放在我要导入 vue.js 组件文件夹的 \'src\' 文件夹中的单独文件中。然后其他一切都只是在组件文件的脚本标记中。让我知道我是否应该用我的 vue.js 文件代码或其他东西重新表述这个问题。我仍然认为我在 vue.js 之外做错了什么，因为我尝试了很多测试，并且 vue.js 至少目前似乎不是问题。也许我错了。
您是否正确调用 Firebase App.initializeApp()？
我以为我做到了，console.log(firebase) 输出是否正确意味着它已初始化？当我删除我的 \'import firebaseConfig from \'../firebaseConfig\';我的 vue.js 导入部分中的行，console.log(firebase) 不再起作用。
您能否跟进此Doc 或者您能否提供有关代码的更多详细信息？此外，您可以跟进此Doc。正如文档描述的那样，我认为没有配置就无法初始化它。
将我正在处理的代码添加到问题中。我已经使用您提到的文档使 Google/Facebook/Github 登录正常工作。 Google/Facebook/Github 登录的工作 src 代码 - github.com/simonjsuh/… - 我在存储库描述中制作的相关 YouTube 视频。显然，让个人登录工作与仅使用 firebaseUI 不同。试图让 firebaseUI 现在工作。

标签： javascript firebase vue.js firebase-authentication

【解决方案1】：

我有同样的问题，然后我找到了点。我明白为什么有人在，其他人是错误的。

初始化需要基于App，当然在调用firebaseUI之前。我们有一些方法可以做到这一点 main.js，导入configuration.js，在认证时间之前...等。
初始化的 firebaseApp（你的 firebaseConfig.js）不同于 import firebase from 'firebase/compat/app'
如果在初始化之前调用了新的 firebaseUI 或者没有初始化，我们会得到错误。然后照顾 Vue 的生命周期。

可能你需要，将 firebaseApp，而不是 firebaseConfig 导入 HellowWorld.vue 以进行初始化。

就我而言，我的“新 firebaseUI”位于 ChildView 的 mount() 中。我在main.ts初始化了firebaseApp，所以childView不再需要初始化，只需要从'firebase/compat/app'导入firebase。

如果您需要代码，我可以向您展示我的案例。

【讨论】：