Блог

Я впервые внедряю Firebase в своем приложении Quasar (с 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 = () =gt; {  return new Promise((resolve, reject) =gt; {  const unsubscribe = firebaseApp.auth().onAuthStateChanged(user =gt; {  unsubscribe();  resolve(user);  }, reject);  })  };  export default boot(({ app }) =gt; {  app.config.globalProperties.$firebase = firebaseApp;  app.config.globalProperties.$analytics = analyticsApp; })  

Инициализация, похоже, работает нормально. Теперь я должен добавить функцию в свой index.ts, расположенный в dirctory маршрутизатора, которая позволяет мне перенаправлять на определенную страницу, когда пользователь не аутентифицирован.

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

$firebase должен ссылаться на элемент globalproperties. Но что бы я ни изменил, я не могу получить доступ к собственности.

Вы не могли бы мне помочь?

Роберто

Внимательно изучив документацию по Квазару, я внес все изменения в 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 = () =gt; {  return new Promise((resolve, reject) =gt; {  const unsubscribe = firebase.auth().onAuthStateChanged(user =gt; {  unsubscribe();  resolve(user);  }, reject);  })  };  export default boot(({ app, router, store }) =gt; {  app.config.globalProperties.$firebase = firebase;  app.config.globalProperties.$analytics = analytics;   router.beforeEach(async (to, from, next) =gt; {  const auth = to.meta.requiresAuth  if (auth amp;amp; !await firebase.getCurrentUser()) {  next('/');  } else {  next();  }  }) })  export { firebase, analytics };  

По сути, я изменил предложение об экспорте загрузки, добавив в него маршрутизатор и хранилище, и я добавил router.beforeEach в предложение.

Я провел сеанс отладки, и функция вызывается каждый раз, когда происходит изменение маршрута.

Роберто