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

Posted 2023-02-22

【中文标题】初始化firebase连接后如何将类星体应用程序挂载到dom？

【英文标题】：How to mount quasar app to dom after firebase connection is initialized?

【发布时间】：2021-09-23 15:11:40

【问题描述】：

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

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

【问题讨论】：

您好，如果我的回答对您有帮助，您可以点击对勾图标接受并点击向上箭头图标投赞成票。 What should I do when someone answers? 否则请随时询问更多问题。

【参考方案1】：

这让它工作了。

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

这里还有一篇关于类星体引导流程的有用文章https://quasar.dev/quasar-cli/boot-files#quasar-app-flow

【讨论】：

export default async ( app, router, store ) => return new Promise(resolve => const unsubscribe = auth.onAuthStateChanged((user) => auth.authUser = user resolve () 取消订阅() ) )

【参考方案2】：

理想情况下，您创建一个 boot file 用于在 Quasar 项目中初始化 Firebase。

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

使用以下命令创建启动文件：

quasar new boot firebase

这将创建一个引导文件/src/boot/firebase.js

使用 npm（或 yarn）安装 Firebase，然后在启动文件中添加以下代码：

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = ...;

if (!firebase.apps.length) 
  firebase.initializeApp(firebaseConfig);


export const auth = firebase.auth();

如前所述，启动文件在 Vue 组件实例化之前运行。现在，您可以在所需的任何组件中访问此 Firebase 身份验证实例。

import auth from "@/boot/firebase"

auth.onAuthStateChanged((user) => 
  //...
)

【讨论】：

我不是在问如何在启动文件中设置 firebase，而是在第一次身份验证更改后如何将应用程序挂载到 DOM 以保持用户刷新。

为我工作。但不要忘记将其添加到 quasar.conf.js： boot: [ 'firebase' ]