Quasar 2.2.2、Vue 3 和 Firebase：如何從路由器訪問 GlobalProperties

Question

我第一次在我的 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 項。 但無論我改變了什么，我都無法訪問該屬性。

你能幫助我嗎？

羅伯托

Answer 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。

我進行了調試會話，每次發生路由更改時都會調用該函數。

羅伯托