"初始化firebase连接后如何将类星体应用程序挂载到dom？"

Question

嗨，我如何在建立与 Firebase 的连接后初始化我的 quasar 应用程序。 我需要这样做，因为我的路由守卫检查用户是否已登录，但如果用户刷新，这会导致 firebase 检查当前用户是否存在，但由于它是异步操作，它最初返回 null。 我之前使用 vue 实现了这一点，我在 main.js 文件中完成了此操作，但我不确定如何执行此操作是 quasar 引导文件。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/main.css'

import { authService } from './firebase/config'

let app

authService.onAuthStateChanged(() => {
  if(!app){
    app = createApp(App).use(router).mount('#app')
  }
})

在 main.js 标准 vue 应用程序中，我们等待 Firebase Auth 初始化，只有在 .onAuthStateChanged() 方法触发后，我们才创建我们的 Vue 应用程序。

在 quasar 应用程序中没有 main.js，而是在主应用程序启动之前运行一些代码的引导文件。

下面是标准引导文件的样子，但我不确定如何将我的 main.js 转换为可执行的引导文件，似乎缺少一些属性，如 mount、createApp 和 use。

// import something here

// "async" is optional!
// remove it if you don't need it
export default async ({ /* app, router, store */ }) => {
  // something to do
}

Answer 1

这让它工作了。

export default async ({ app, router, store }) => {
    return new Promise(resolve => {
        const unsubscribe = authService.onAuthStateChanged(() => {
            resolve()
            unsubscribe()
        })
    })
}

Answer 2

理想情况下，您创建一个启动文件<\/a>以在 Quasar 项目中初始化 Firebase。

引导文件实现了一个特殊目的：它们在应用程序的 Vue 根组件实例化之前运行代码，同时允许您访问某些变量，如果您需要初始化库、干扰 Vue 路由器、注入 Vue 原型或注入根实例，则需要这些变量Vue 应用程序。

使用以下命令创建引导文件：

这将创建一个引导文件\/src\/boot\/firebase.js<\/code>
使用 npm（或 yarn）安装 Firebase，然后在引导文件中添加以下代码：
如前所述，启动文件在 Vue 组件实例化之前运行。 现在，您可以在所需的任何组件中访问此 Firebase 身份验证实例。