How can i get the user in firebase database, to wr

Question

hope can some one help me, i´m beguinner on this. I´m using vuejs, firebase, for to write in the database from a vue component. I already had the auth working and the writting; but i want that each user write in his own component, and not all users in the same component. this is my code:

users login in this component(login.vue):

<template>
<div>

<h2> auth </h2>

   <div class="container">
   <div class="row">
     <div class="col s12 m8 offset-m2">
       <div class="login card-panel green white-text center">
         <h3>Login</h3>
         <form action="index.html">
           <div class="input-field">
             <i class="material-icons prefix">email</i>
             <input type="email" id="email" v-model="email">
             <label class="white-text" for="email">Email Address</label>
           </div>
           <div class="input-field">
             <i class="material-icons prefix">lock</i>
             <input type="password" id="password" v-model="password">
             <label class="white-text" for="password">Password</label>
           </div>
           <button v-on:click="login" class="btn btn-large btn-extended 
            grey lighten-4 black-text">Login</button>
         </form>
       </div>
     </div>
   </div>
   </div>
  </div>
</template>

<script>
import firebase from 'firebase';
export default {
name: 'login',
data: function() {
 return {
  email: '',
  password: ''
 };
},
methods: {
login: function(e) {
  firebase
    .auth()
    .signInWithEmailAndPassword(this.email, this.password)
    .then(
      user => {
        alert(`You are logged in as ${user.email}`);
        this.$router.go({ path: this.$router.path });
      },
      err => {
        alert(err.message);
      }
    );
  e.preventDefault();
 }
}
};
</script>

then in this (envio.vue)component the user write and send to firebase:

<template>
 <div id="app">
  <form @submit.prevent="enviarMensaje">
      <textarea v-model="boton1" cols="30" rows="1"></textarea>
      <br>
      <textarea v-model="mensaje" cols="30" rows="10"></textarea>
      <br>
      <input type="submit" value="Enviar mensaje">
  </form>
  <hr>
  <h1>texto con idicaciones</h1>
 </div>
</template>


<script>
import firebase from 'firebase'
import { contenidoFormulario } from '../firebase'

 export default {
  data: function() {
  return {
  mensaje: null,
  boton1: null,
  usuario: '',
  }
 },

 methods: {
  enviarMensaje(){
   contenidoFormulario(uid).set({
      mensaje: this.mensaje,
      boton1: this.boton1,
      usuario: this.usuario,
   })
  }
 }
}
</script>

and this is the firebase database json:

https://xxxxxxx.firebaseio.com/

Project

-- formularioContenido:

     boton1: "..."

     mensaje: "..."

     usuario: "..."

and i need somthing like this:

Project

-- formularioContenido:

     --user A

          boton1: "..."

          mensaje: "..."

          usuario: "..."

     --user B

          boton1: "..."

          mensaje: "..."

          usuario: "..."

'../firebase' code:

import { initializeApp } from 'firebase';



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


export const db = app.database();
export const contenidoFormulario = db.ref('formularioContenido');

main.js

let app;
firebase.auth().onAuthStateChanged(user => {
  if (!app) {

   app = new Vue({
   el: '#app',
   data: {uid: null}, 
   router,
   template: '<App/>',
   components: { App }
 });

} });

my logout:

<template>
<div id="app">
<section>

   //...

  <li v-if="isLoggedIn"><button v-on:click="logout" class="btn 
   black">Logout</button></li>

</section>
</div>
</template>

<script>
import firebase from 'firebase';
export default {
  name: 'navbar',
  data() {
   return {
    isLoggedIn: false,
    currentUser: false,
  };
 },
  created() {
    if (firebase.auth().currentUser) {
     this.isLoggedIn = true;
     this.currentUser = firebase.auth().currentUser.email;
  }
 },
  methods: {
   logout: function() {
     firebase
     .auth()
     .signOut()
     .then(() => {
      this.$root.uid = null;   //just added
      this.$router.go({ path: this.$router.path });
     });
    }
   }
  };

  </script>

Answer 1

You'll have to save the uid upon login, so you can use it later.

The best way to handle that would be using Vuex, but, without better knowledge of your app, the simplest way is just to create a uid property in the data of your root component, like.

// probably main.js file
new Vue({
  el: "#app",
  data: {uid: null}, // added this
  components: { App },
  template: "<App/>"
});

Then it will be globally available as:

this.$root.uid

And you can update it as:

this.$root.uid = 'newUserId';

Having it that way, you can consider that, if $root.uid is set, then the user is logged in.

So, to set it, change your login method:

methods: {
login: function(e) {
  firebase
    .auth()
    .signInWithEmailAndPassword(this.email, this.password)
    .then(
      user => {
        alert(`You are logged in as ${user.email}`);
        this.$root.uid = user.uid;                       // added this
        this.$router.go({ path: this.$router.path });
      },
      err => {
        alert(err.message);
      }
    );
  e.preventDefault();
 }
}

Then turn contenidoFormulario into a function like:

export const contenidoFormulario = (uid) => db.ref('formularioContenido/' + uid);

And, when using it inside a component, do:

 methods: {
  enviarMensaje(){
   contenidoFormulario(this.$root.uid).set({        // changed here
      mensaje: this.mensaje,
      boton1: this.boton1,
      usuario: this.usuario,
   })
  }
 }

That should work.

Note: don't forget to put somewhere in your code this.$root.uid = null; for logout.

Note[2]: Since you are using Firebase, I recommend you take a look in vuefire. It makes the integration much easier.