Quasar 2.2.2、Vue 3 和 Firebase：如何从路由器访问 GlobalProperties

Posted 2023-02-22

【中文标题】Quasar 2.2.2、Vue 3 和 Firebase：如何从路由器访问 GlobalProperties

【英文标题】：Quasar 2.2.2, Vue 3 and Firebase: how to access GlobalProperties from router

【发布时间】：2021-12-17 03:35:10

【问题描述】：

我第一次在我的 Quasar 应用程序中实施 Firebase（使用 Vue 3）。我创建了启动文件 firebase.js，这是它​​的内容：

import  boot  from 'quasar/wrappers'
import  initializeApp  from 'firebase/app';
import  getAnalytics  from "firebase/analytics";

// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
const firebaseConfig = 
  apiKey: 'XXX',
  authDomain: 'XXX',
  projectId: 'XXX',
  storageBucket: 'XXX',
  messagingSenderId: 'XXX',
  appId: 'XXX',
  measurementId: 'XXX'
;

const firebaseApp = initializeApp(firebaseConfig);
const analyticsApp = getAnalytics(firebaseApp);

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

export default boot(( app ) => 
  app.config.globalProperties.$firebase = firebaseApp;
  app.config.globalProperties.$analytics = analyticsApp;
)

初始化似乎工作正常。现在我必须向我的 index.ts 添加一个函数，该函数位于路由器目录中，允许我在用户未通过身份验证时重定向到特定页面。

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

$firebase 必须引用 globalproperties 项。但无论我更改了什么，我都无法访问该属性。

你能帮帮我吗？

罗伯托

【参考方案1】：

仔细查看 Quasar 文档，我已经在 firebase.js 文件中进行了所有更改，现在是这样的。

/* eslint-disable */
import  boot  from 'quasar/wrappers'
import  initializeApp  from 'firebase/app';
import  getAnalytics  from "firebase/analytics";

const firebaseConfig = 
  apiKey: 'XXX',
  authDomain: 'XXX',
  projectId: 'XXX',
  storageBucket: 'XXX',
  messagingSenderId: 'XXX',
  appId: 'XXX',
  measurementId: 'XXX'
;

const firebase = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebase);

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

export default boot(( app, router, store ) => 
  app.config.globalProperties.$firebase = firebase;
  app.config.globalProperties.$analytics = analytics;

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

export  firebase, analytics ;

基本上我已经更改了导出引导子句，添加了路由器并存储在其中，并且我在子句中添加了 router.beforeEach。

我已经创建了一个调试会话，并且每次发生路由更改时都会调用该函数。

罗伯托