Firebase 身份验证在挂载挂钩之前无法正常工作，我不知道为什么

Question

我是第一次使用 firebase，遇到了这个我无法修复的错误。

基本上我有一个主屏幕和一个登录屏幕。当我运行 onBeforeMount 检查用户是否登录时，我收到以下错误：

Uncaught ReferenceError: onAuthStateChanged is not defined
at eval (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js:12:7)
at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:357:18)
at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:367:17)
at Array.hook.__weh.hook.__weh (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3388:19)
at invokeArrayFns (webpack-internal:///./node_modules/@vue/shared/dist/shared.esm-bundler.js:648:11)
at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6089:70)
at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:237:19)
at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6294:5)
at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6029:5)
at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5979:9)

这是我的 main.js 文件中的内容：

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "Censored",
  authDomain: "Censored",
  projectId: "Censored",
  storageBucket: "Censored",
  messagingSenderId: "Censored",
  appId: "Censored"
};

const app = initializeApp(firebaseConfig);

createApp(App).use(router).mount('#app')

这是我的 app.vue 文件中的脚本

<script>
import { onBeforeMount } from "vue";
import router from "@/router";
import { getAuth } from "firebase/auth";

export default {
  setup() {
    onBeforeMount(() => {
      const auth = getAuth();

      onAuthStateChanged(auth, (user) => {
        if (!user) {
          router.replace("/login");
        } else if (route.path == "/login" || route.path == "/signup") {
          router.replace("/");
        }
      });
    });
  },
};
</script>

Answer 1

onAuthStateChanged 需要导入到

从“firebase/auth”导入{getAuth，onAuthStateChanged}“

Firebase 身份验证在挂载挂钩之前无法正常工作，我不知道为什么

Firebase auth not working on before mount hook and I don't know why

javascript

firebase

firebase-authentication

vuejs3