Firebase 未在 Vue3 路由器中初始化

Question

我在 main.js 中初始化了 firebase，它在应用程序中整体运行。

当我在路由器中使用 firebase 进行 beforeEnter 检查时，它无法识别已初始化的 firebase。

异常：Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

查看日志，路由器 beforeEnter 检查在 main.js 完成初始化之前完成。

main.js:

firebase.initializeApp(firebaseConfig);
firebase.auth().onAuthStateChanged(function(user){...}

router.ts:

router.beforeEach((to, from, next) => {
  console.log("router | beforeEach")
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if(requiresAuth && (!currentUser || currentUser.isAnonymous)) next('login')
  else if(!requiresAuth && currentUser) next('eorDashboard')
  else next();
})

如何绕过这个问题，因为它在 Vue2 中运行良好？

Answer 1

在您的 main.js 中，您应该确保仅在 Firebase Auth 对象准备好使用时才初始化 Vue 应用程序

main.js

let app = ''

firebase.initializeApp(firebaseConfig);
firebase.auth().onAuthStateChanged(() => {
  if (!app) {
    app = new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')
  }
})

Firebase 未在 Vue3 路由器中初始化

Firebase not initialized in Vue3 Router

firebase

vue.js

vue-cli-3