1

Estoy teniendo un problema, tengo desarrollado una app donde tiene un login. Una vez logueado te lleva al perfil de usuario, pero siempre me aparece la información del usuario anterior logueado, solamente se actualiza cunado realizo cambio en el script y luego refresca de forma automática el servidor de Vuejs y ahí recién aparece con la información del usuario logueado en ese momento. También cuando recién inicio la app no me reconoce el usuario logueado en ese momento, recién cuando actualizo la pagina lo reconoce.

1) Alguien sabe como actualizar un div cada cierto tiempo con VueJS 2) Como hago para que me reconozca el usuario al inicio de la template perfil cuando el usuario es logueado y redirigido al template.

Perfil.vue

<template>
<div id='perfil'>
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse " id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>


<a href="#" @click="logout">Logout</a>
<a href="#" @click="datos">DATOS</a>
<div class="col-sm-8  center text-center cardclass">

      </div>
  <div class="container">
  <div class="row">
    <div class="col-sm-8">
       <div class="card">
          <div class="card-header">
              <h3>Registra gratis</h3>
          </div>
          <div class="card-body">

              <form @submit.prevent="registrarVariable">
                   <div class="form-group">                   
                       <input type="text" id="Variablenom"  class="form-control" placeholder="Nombre de la Variable" v-model="Variable.Variablenom">
                    </div>
                    <div class="form-group row">
                        <label for="example-date-input" class="col-2 col-form-label">Nacimiento</label>
                        <div class="col-10">
                          <input class="form-control" type="date" value=""  v-model="Variable.Variable_nacimiento" name="Variable_nacimiento" id="Variable_nacimiento">
                        </div>
                    </div>

                    <div class="form-group">

                       <input type="text" class="form-control" placeholder="sexo" v-model="Variable.sexo">
                    </div>
                    <div class="form-group">


                <button type="submit" class="btn btn-primary">Registrar</button>
              </div>

              </form>

          </div>
 <p v-if="errors.length">
    <b>Por favor corrige los siguientes errores : </b>
    <ul>
      <li v-for="er in errors">{{ er }}</li>
    </ul>
  </p>
        </div>
    </div>
    <div  class="col-sm-4">
      <div class="card" style="width: 18rem;">
  <div class="card-header">
    Mis Variables
  </div>

  <ul class="list-group list-group-flush" id="Variablecomp">
    <li v-for="m in Variabledb "

     class="list-group-item" v-bind:key="m['.key']">
     {{m.Variablenom}} 
      <span class="delete">
       <a href="#"  @click="eliminarVariable(m)"><i class="fas fa-trash"></i></a> 
        <a href="#" data-toggle="modal" data-target="#myModal"  ><i class="fas fa-edit"></i></a>
        <a href="#" ><i class="fas fa-share-alt-square"></i></a>
        </span> 

    </li>

  </ul>
</div>

    </div>

  </div>
</div>




<footer class="footer">

      <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </footer>


<!-- The Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>
</div>


</template>
<script>

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 Variablesdb = mdb.ref('Variables');
let usuariosdb = mdb.ref('usuarios');
var vm = this;
var user = firebase.auth().currentUser;
var name,email,photoUrl,usersid,Variablesd;


if (user == '[object Object]') {
  name = user.displayName;
  email = user.email;
  photoUrl = user.photoURL;
  usersid = user.uid;
  Variablesd = mdb.ref('Variables').child(usersid).child('Variable');
 console.log(" 1 LOG : "+Variablesd);

}else{
  Variablesd = mdb.ref('Variables').child('Variable');
  console.log(" 1 ERROR : "+Variablesd);
}


firebase.auth().onAuthStateChanged(function(user,request) {
  if (user) {
       if (user == '[object Object]') {
        name = user.displayName;
        email = user.email;

        usersid = user.uid;
        Variablesd = mdb.ref('Variables').child(usersid).child('Variable');
        console.log(" 2 LOG : "+Variablesd);


        }else{

        Variablesd = mdb.ref('Variables').child('Variable');
        console.log(" 2 ERROR : "+Variablesd);
}

  }
});


export default {
  name: 'perfil',
  firebase:{
   usuarios : usuariosdb,
   Variables : Variablesdb,
   Variabledb:Variablesd



  },
  data () {

    return {
      errors:[],
        Variable:{
          Variablenom:'',
          Variable_nacimiento:'',
          sexo:'',
          iduser:'', 
        }
    }
  },
  methods:{
      registrarVariable(e){
          this.errors = [];
          if(!this.Variable.Variablenom){
              toastr.error('Debes colocar el nombre de tu Variable');
              this.errors.push('Debes colocar el nombre de tu Variable');
          }
          else if(!this.Variable.Variable_nacimiento){
              toastr.error('Debes colocar la fecha de nacimiento de tu Variable');
              this.errors.push('Debes colocar la fecha de nacimiento de tu Variable');
          }else if(!this.Variable.sexo){
              toastr.error('Debes colocar el sexo de tu Variable');
              this.errors.push('Debes colocar el sexo de tu Variable');
          }else{

            var user = firebase.auth().currentUser;
            var self = this
            let usersid = user.uid;
            this.Variable.iduser=usersid

            Variablesdb.child(usersid).child('Variable').push(this.Variable).key;
            this.Variable.Variablenom='',
            this.Variable.Variable_nacimiento='',
            this.Variable.sexo='',
            this.Variable.iduser='',
            toastr.success('Variable agregada correctamente');

          }

      },

      logout(){
         firebase.auth().signOut().then(()=>this.$router.replace('login'));
      },
      datos(){
          var user = firebase.auth().currentUser;

          if (user != null) {
          user.providerData.forEach(function (profile) {
          console.log("Sign-in provider: " + profile.providerId);
          console.log("  Provider-specific UID: " + profile.uid);
          console.log("  Name: " + profile.displayName);
          console.log("  Email: " + profile.email);
          console.log("  Photo URL: " + profile.photoURL);
          console.log("ID : "+user.uid);
          });
}
      },
      eliminarVariable(Variable){
      if(confirm('Quieres elimnar de la lista?')){
        Variablesdb.child(Variable['.key']).remove();
        toastr.success('eliminado');
      }
    },
      editarVariable(Variable){

        Variablesdb.child(Variable['.key']).updated({ edit:true });
        toastr.success('Guardado');

  },CancelEditarVariable(Variable){

        Variablesdb.child(Variable['.key']).updated({ edit:false });
        toastr.success('Cancelador');

  },metodoOnBlur(Variable){

    const chields = Variablesdb.child(Variable['.key']).child('iduser');
    return chields
  }
}
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.delete{
  margin-left:40%;
}
.cardclass{
  margin-top: 5%;
  margin-bottom: 5%;
}
.col-center{
  float: none;
  margin-left: auto;
  margin-right: auto;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
1
  • No he podido revisarlo bien porque el bloque de código es muy extenso, pero creo que es porque tienes código js fuera de la zona de export default y por eso tienes vision del usuario anterior logeado. Prueba a meter todo es código en methods o en created, según lo necesites y a ver q te sale Commented el 28 jul. 2018 a las 22:31

3 respuestas 3

2

El tema de actualizar un div cada cierto tiempo es tapar un problema que puede estar detrás y que te va a traer problemas a la larga. En cualquier caso al utilizar vue.js puedes usar forceUpdate.

Sería algo así:

mounted() {
this.$forceUpdate();
  }

Si quisieras ejecutarlo cada X segundos puedes usar setInterval o si quieres ejecutarlo al cabo de X segundos setTimeout Ejemplo:

setTimeout(this.$forceUpdate(), 5000)

Aquí tienes el orden en que se ejecutan las intancias de vue para que sepas donde ponerlo: https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram te adjunto también el enlace a la documentación oficial de forceUpdate: https://v2.vuejs.org/v2/api/#vm-forceUpdate

Ahora bien, si quieres tratar de arreglarlo, en tu función onAuthStateChanged tienes pasados dos valores user y request, deberías modificarlo para que quede así:

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // El usuario está logeado y muestro sus datos o lo que sea
  } else {
    // El usuario no está logeado y borro todo rastro del anterior
  }
});
1

1.- No uses forze update, es una mala practica y te hará garras tu propio proyecto.

2.- Como usas tu autentificación? En base a un Token de logged in? -> esto es lo más común, asi que te explicare en base a esto.

Tienes 2 maneras de hacerlo, manejar el header si está loggined or not (v-if) si en tu token respondes con la información del usuario, puedes decodificarlo y mostrar sus datos en base a su token. Si quieres que se siga guardando el usuario cuando entre a tú página, solo guarda el token en el localStorage, y al momento de que entre, las variables de VueJs que pusiste en tu header, van a tomar el token existente y mostrará de nuevo la información del token.

0

Tiene que ver con la manera que se interpreta la reactividad en el contexto de tu aplicacion.

El navegador no sabe cuando actualizas los datos, otra forma de hacer que un componente se vuelva a renderizar (ademas de las ya mencionadas, y menos invasiva), es usar una key, en este caso tampoco necesitas actualizar cada x tiempo, por que en el momento que el valor de la key se actualice el componente se volvera a renderizar.

por ejemplo:

<tu-componente :key="user.id"/>

con eso deberia ser suficiente para que ese componente se actualice cada ver que user.id cambie.

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.