简体   繁体   English

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

[英]How to mount quasar app to dom after firebase connection is initialized?

Hi how do I initialize my quasar app once after I have established a connection to firebase.嗨,我如何在建立与 Firebase 的连接后初始化我的 quasar 应用程序。 I need to do this because my route guards checks whether a user is logged in, but if a user refreshes this causes firebase to check whether a current user exists but since it's a async operation it initially returns null.我需要这样做,因为我的路由守卫检查用户是否已登录,但如果用户刷新,这会导致 firebase 检查当前用户是否存在,但由于它是异步操作,它最初返回 null。 I have previously achieved this using vue where I have done this in my main.js file, but I'm unsure how to do this is quasar boot file.我之前使用 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')
  }
})

Here inside main.js standard vue app, we wait for Firebase Auth to initialize and only after .onAuthStateChanged() method fires, we create our Vue App.在 main.js 标准 vue 应用程序中,我们等待 Firebase Auth 初始化,只有在 .onAuthStateChanged() 方法触发后,我们才创建我们的 Vue 应用程序。

In an quasar app there is no main.js but instead boot files which run some code before main app starts.在 quasar 应用程序中没有 main.js,而是在主应用程序启动之前运行一些代码的引导文件。

Below is what a standard boot files looks like but I am unsure how to convert my main.js to a executable boot file, seems like some properties are missing like mount, createApp & use.下面是标准引导文件的样子,但我不确定如何将我的 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
}

This got it working.这让它工作了。

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

Ideally you create a boot file<\/a> for initializing Firebase in a Quasar project.理想情况下,您创建一个启动文件<\/a>以在 Quasar 项目中初始化 Firebase。

Boot files fulfill one special purpose: they run code before the App's Vue root component is instantiated while giving you access to certain variables, which is required if you need to initialize a library, interfere with Vue Router, inject Vue prototype or inject the root instance of the Vue app.引导文件实现了一个特殊目的:它们在应用程序的 Vue 根组件实例化之前运行代码,同时允许您访问某些变量,如果您需要初始化库、干扰 Vue 路由器、注入 Vue 原型或注入根实例,则需要这些变量Vue 应用程序。

<\/blockquote>

Create a boot file using the following command:使用以下命令创建引导文件:

 quasar new boot firebase<\/code><\/pre>

This will create a boot file \/src\/boot\/firebase.js<\/code>这将创建一个引导文件\/src\/boot\/firebase.js<\/code>

Install Firebase using npm (or yarn) and then add the following code in your boot file:使用 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();<\/code><\/pre>

As mentioned earlier, boot file runs before Vue component is instantiated.如前所述,启动文件在 Vue 组件实例化之前运行。 Now you can access this instance of Firebase Auth in any component you want.现在,您可以在所需的任何组件中访问此 Firebase 身份验证实例。

 import {auth} from "@\/boot\/firebase" auth.onAuthStateChanged((user) => { \/\/... })<\/code><\/pre>"

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM