Обернуть Vue. js Firebase-Object в обработчик onAuthStateChanged? - PullRequest
Новая
       160

Обернуть Vue. js Firebase-Object в обработчик onAuthStateChanged?

0 голосов
/ 09 мая 2020

Я реализую Vue. js веб-приложение с GoogleFirebase и плагином Vuefire для firebase. Мне нужно обернуть объект Vue. js Firebase-Object в функцию Firebase onAuthStateChanged, чтобы получить данные из базы данных реального времени с помощью uid авторизованного пользователя. Логин реализован с помощью Vue -Router. Следующий код должен объяснить мой вопрос, и я надеюсь, что кто-нибудь может помочь мне с моим вопросом.

Это не работает, и я получаю ошибку UID Of Null. 

firebase: {
    tableTennisData: db.ref(auth.currentUser.uid).child('tableTennis'),
},

Эта функция , вызываемый с помощью кнопки, регистрирует правильный идентификатор пользователя в консоли. 

methods: {
    test: function(){
        console.log(auth.currentUser.uid);
        this.uid = auth.currentUser.uid;
    },
}

Но если это работает без обработчика onAuthStateChanged, почему реализация с Firebase-Object не работает?

Вот как я отправляю sh данные в firebase и это работает очень хорошо из-за обработчика onAuthStateChanged из облачных функций firebase. 

auth.onAuthStateChanged(function (){
   db.ref(auth.currentUser.uid).child('tableTennis').push(obj);
});

Мне действительно нужен способ доступа к данным, отправленным пользователем uid. Я думаю, что мы могли бы решить эту ошибку с помощью Firebase-Object, заключенного в обработчик onAuthStateChanged.

Подводя итог, это функция входа в систему Vue -Router file. 

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) =>{
  const currentUser = auth.currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if(requiresAuth && !currentUser){
    next('/login');
   }else if(!requiresAuth && currentUser){
     next('/home');
  }else{
    next();
  }
});
export default router;

И, наконец, это главный. js файл. 

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import firebase from "firebase";
import './firebase';

import { rtdbPlugin } from 'vuefire'
Vue.use(rtdbPlugin);

Vue.config.productionTip = false;

let app = '';

firebase.auth().onAuthStateChanged(() =>{
  if(!app){
    app = new Vue({
      router,
      render: h => h(App)
    }).$mount("#app");
  }
});

Другой файл firebase. js экспортирует переменные auth, которые равны firebase.auth () и db, который совпадает с firebase.database. 

import { initializeApp } from 'firebase';

  const firebase = initializeApp({
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  });

  export const db = firebase.database();
  export const auth = firebase.auth();

Информация об API была удалена для этого вопроса.

Надеюсь, этой информации достаточно, чтобы помочь мне решить эту проблему.

Спасибо. 

firebase: {
    tableTennisData: db.ref(auth.currentUser.uid).child('tableTennis'),
},

Ошибка UID = Null.

1 Ответ

0 голосов
/ 10 мая 2020

Проблема может быть в том, как вы настроили и инициализировали firebase.

Лучше использовать прогрессивное улучшение, чтобы вы могли получить доступ к нужным вам службам, когда они вам нужны.

Измените свой firebase.js config на следующий 

// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import * as firebase from "firebase/app";

// Add the firebase services that you want to use
import "firebase/database";
import "firebase/auth";

// Initialize firebase
const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};

const fb = firebase.initializeApp(firebaseConfig);
const db = firebase.database();

// export firebase services
export { db, fb };

Затем измените свой main.js на следующий 

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import { fb } from "firebase"; // your firebase services live here (auth)
require("firebase/database"); // !important

import { rtdbPlugin } from 'vuefire'
Vue.use(rtdbPlugin);

Vue.config.productionTip = false;

let app = '';

firebase.auth().onAuthStateChanged(() =>{
  if(!app){
    app = new Vue({
      router,
      render: h => h(App)
    }).$mount("#app");
  }
});

Затем измените logi защиты маршрута c в файле маршрутизатора на следующее 

import { fb } from "../firebase.js";
const router = new VueRouter({
  routes
});

// check if route requiresAuth
router.beforeEach((to, from, next) => {
  if (to.matched.some(rec => rec.meta.requiresAuth)) {
    const user = fb.auth().currentUser;
    // check auth state of user
    if (user) {
      next(); // user signed in, proceed to route
    } else {
      next('/login'); // user not signed in, route to login
    }
  } else {
    next(); // route does not require auth
  }
});

export default router;

Наконец, вы должны иметь доступ для доступа к uid следующим образом: 

firebase: {
    tableTennisData: db.ref(fb.auth().currentUser.uid).child('tableTennis'),
}

Помните, что fb теперь содержит ваши службы firebase, а db теперь относится к выбранной вами базе данных (firestore /rtdb).

Таким образом, вы получите доступ к своим службам firebase следующим образом 

fb.auth()
fb.storage()
fb.analytics()

И вы получите доступ к своему rtdb вот так 

db.ref.('/users/' + uid)

Надеюсь, это поможет.

...