Estoy implementando por primera vez Firebase en mi aplicación Quasar (con Vue 3). Creé el archivo de arranque firebase.js y este es su contenido:
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; })La inicialización parece funcionar bien. Ahora debo agregar una función a mi index.ts ubicado en el directorio del enrutador que me permite redirigir a una página específica cuando el usuario no está autenticado.
Router.beforeEach(async (to, from, next) => { const auth = to.meta.requiresAuth if (auth && !await $firebase.getCurrentUser()) { next('/'); } else { next(); } })$firebase debe hacer referencia al elemento globalproperties. Pero independientemente de lo que haya cambiado, no puedo acceder a la propiedad.
¿Me puedes ayudar?
roberto
Mirando detenidamente la documentación de Quasar, hice todos los cambios en el archivo firebase.js, que ahora es así.
/* 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 };Esencialmente, he cambiado la cláusula de arranque de exportación agregando enrutador y tienda en él y he agregado enrutador.beforeEach en la cláusula.
Realicé una sesión de depuración y se llama a la función cada vez que se produce un cambio de ruta.
roberto