Question

希望有人可以帮助我，我就是这样。我使用vuejs，firebase，从vue组件写入数据库。我已经有了auth工作和写作;但我希望每个用户都在自己的组件中编写，而不是所有用户都在同一个组件中。这是我的代码：

用户登录此组件（login.vue）：

task runSimple {
  doLast {
    com.test.model.JavaTest.anotherMethod("foo", "bar")
  }
}

然后在这个（envio.vue）组件中，用户编写并发送到firebase：

<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>

这是firebase数据库json：

https://xxxxxxx.firebaseio.com/

项目

- formularioContenido：

<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>

我需要这样的事情：

项目

- formularioContenido：

     boton1: "..."

     mensaje: "..."

     usuario: "..."

'../ firebase'代码：

     --user A

          boton1: "..."

          mensaje: "..."

          usuario: "..."

     --user B

          boton1: "..."

          mensaje: "..."

          usuario: "..."

main.js

import { initializeApp } from 'firebase';



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


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

} }）;

我的退出：

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

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

Answer 1

您必须在登录时保存uid，以便日后再使用。

处理这种情况的最佳方法是使用Vuex，但是，如果不了解您的应用，最简单的方法就是在根组件的uid中创建data属性，例如

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

然后它将全球可用：

this.$root.uid

您可以将其更新为：

this.$root.uid = 'newUserId';

这样，你可以考虑，如果设置了$root.uid，那么用户就会登录。

因此，要设置它，请更改您的登录方法：

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();
 }
}

然后将contenidoFormulario转换为如下函数：

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

并且，在组件中使用它时，请执行：

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

这应该有效。

注意：请不要忘记在代码this.$root.uid = null;中放置注销。

注意[2]：由于您使用的是Firebase，我建议您查看vuefire。它使集成更容易。

如何在firebase数据库中获取用户，从具有vuejs的组件写入？

1 个答案: