Quasar 2.2.2+Vue3+Firebase项目如何从路由访问GlobalProperties

挂载在app.config.globalProperties上的属性仅可在Vue组件上下文（组件模板、组件setup函数通过getCurrentInstance()获取）中访问，路由初始化逻辑不在Vue实例上下文范围内，因此无法直接读取该属性。

修改src/boot/firebase.js，在原有代码基础上额外导出初始化完成的Firebase实例，即可在任意文件中直接导入使用：

// 原有导入、firebaseConfig配置不变
export const firebaseApp = initializeApp(firebaseConfig);
export const analyticsApp = getAnalytics(firebaseApp);
// 原有getCurrentUser挂载逻辑、boot导出逻辑不变

之后在src/router/index.ts中直接导入实例即可使用：

import { firebaseApp } from 'src/boot/firebase'

Router.beforeEach(async (to, from, next) => {
    const auth = to.meta.requiresAuth
    if (auth && !await firebaseApp.getCurrentUser()) {
      next('/');
    } else {
      next();
    }
})

Quasar的Boot函数参数内置了router实例，你可以直接在firebase的boot文件中注册路由守卫，无需修改路由配置文件，也不用跨文件导出实例：

// 修改firebase.js中的boot导出部分
export default boot(({ app, router }) => {
  app.config.globalProperties.$firebase = firebaseApp;
  app.config.globalProperties.$analytics = analyticsApp;

  // 直接在此处注册路由守卫
  router.beforeEach(async (to, from, next) => {
    const auth = to.meta.requiresAuth
    if (auth && !await firebaseApp.getCurrentUser()) {
      next('/');
    } else {
      next();
    }
  })
})

你当前使用的是Firebase v9及以上的模块化版本，原代码中firebaseApp.auth()的调用方式已经废弃，需要补充Auth模块的初始化否则会运行报错：

1. 先在firebase.js顶部导入Auth相关方法

import { getAuth, onAuthStateChanged } from "firebase/auth";

2. 初始化firebaseApp后初始化Auth实例

const auth = getAuth(firebaseApp);

3. 修改getCurrentUser方法的调用逻辑

firebaseApp.getCurrentUser = () => {
  return new Promise((resolve, reject) => {
    const unsubscribe = onAuthStateChanged(auth, user => {
      unsubscribe();
      resolve(user);
    }, reject);
  })
};

内容的提问来源于stack exchange，提问作者Roberto Scarciello