0

tengo un error que me esta sucediendo al autenticarme con VueJS y Firebase. Es una simple aplicación que al autenticarme, deberia redirigirme al perfil del usuario y mostrarme los datos del mismo. Pero aveces me muestra los datos y aveces no y dice esto:

"Error: VueFire: invalid Firebase binding source."

Luego me dice :

[Vue warn]: Property or method "perfilUsuario" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: 

Este es parte del script de perfil.vue, es donde me redirige el método una vez logueado.

import firebase,{ auth } from 'firebase'
import mdb from '../config'
import toastr from 'toastr'
import Vue from 'vue'
import admin from 'firebase-admin'
import VueSession from 'vue-session'
import Router from 'vue-router'



let usuariosdb = mdb.ref('usuarios');
var vm = this;
var user = firebase.auth().currentUser;
var name,email,photoUrl,usersid,mascotasd;

console.log("USER : "+user);

firebase.auth().onAuthStateChanged(function(user,request) {
  if (user) {
       if (user != null) {
        name = user.displayName;
        email = user.email;
        photoUrl = user.photoURL;
        usersid = user.uid;
       perfilUsuario=mdb.ref('perfilUsuariodb').child(usersid).child('usuarios');

        }
  }
});

if (user != null) {
  name = user.displayName;
  email = user.email;
  photoUrl = user.photoURL;
  usersid = user.uid;
  perfilUsuario= mdb.ref('perfilUsuariodb').child(usersid).child('usuarios');


}

export default {
  name: 'perfil',
  firebase:{

   usuariosdb:perfilUsuario



  },

Estoy seguro que el error esta cuando intenta buscar los valores del usuario logueado con var user = firebase.auth().currentUser; y no los encuentra, pero cuando renderizo varias veces encuentra el valor y el error desaparece. Mi pregunta es, como hago para que me traiga los valores del usuario antes de :

firebase:{

       usuariosdb:perfilUsuario



      },
4
  • [Vue warn]: Property or method "perfilUsuario" is not defined eso es problemas del tu archivo en la app vue. Estas intentando usar una variable que no esta definida el 25 jul. 2018 a las 16:09
  • JBauman, si es asi...pero en realidad esta definida, solo que no la esta reconociendo. Es decir que cuando renderiza la pagina me lee primero la variable perfilUsuario del HTML y luego la busca en el JavaScript, pero no se como hacer en VueJS que me lea primero la funciones y luego las declaraciones en los componentes el 25 jul. 2018 a las 16:19
  • Haz una nueva pregunta, me pasas enlace por aqui y la resolvemos el 25 jul. 2018 a las 16:34
  • JBaunmann Este es el enlace : [es.stackoverflow.com/questions/183897/… (es.stackoverflow.com/questions/183897/…) el 25 jul. 2018 a las 16:37

2 respuestas 2

0

La solución fue tan simple como colocar el CDN de firebase en el header del proyecto, y no usar el npm install

0

De todas es más sencillo si haces la comprobación de onAuthStateChanged dentro del ciclo de vida created ya que desde ahí sí tienes acceso al modelo de la instancia y puedes cambiar el valor del mismo y por ende del binding con VueFire. Algo así.

import firebase, { auth } from 'firebase';
import mdb from '../config';
import toastr from 'toastr';
import Vue from 'vue';
import admin from 'firebase-admin';
import VueSession from 'vue-session';
import Router from 'vue-router';

const consultaUsuarios = mdb
  .ref('perfilUsuariodb')
  .child(usersid)
  .child('usuarios');

export default {
  name: 'perfil',
  created() {
    firebase.auth().onAuthStateChanged(function (user) {
      this.usuariosdb = user ? consultaUsuarios : null;
    });
  },
  data: () => ({ usuariosdb: [] }),
  firebase: {
    usuariosdb,
  },
};

Otra cosa, quizás quieras hacer una comprobación de auth en cada ruta (y des-suscribirte para evitar problemas de memoria), en ese caso puedes utilizar un guardián de Vue Router y crear una promesa que envuelva a onAuthStateChanged.

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

router.beforeEach(async (to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !(await getCurrentUser())) {
    next({ name: "auth" });
  } else if (!requiresAuth && (await getCurrentUser())) {
    next({ name: "home" });
  } else {
    next();
  }
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.