Vue.js 在配置文件页面中获取当前用户登录信息-Firebase和Vuejs

我正在尝试为我的应用程序中已注册的用户创建用户配置文件

我正在尝试为我的应用程序中已注册的用户创建用户配置文件。 我在我的云firestore中创建了一个名为profiles和field name的集合，以存储注册帐户时的用户名

因此，我使用vuex进行更好的管理。这是我到目前为止所做工作的一段代码

My Store.js

signUserUp ({commit}, payload) {
      commit('setLoading', true)
      commit('clearError')
      firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
        .then(
          user => {
            commit('setLoading', false)
            const newUser = {
              id: user.uid
            }
            commit('setUser', newUser)
            // Add a new document in collection "cities"
            db.collection('profiles').doc(user.user.uid).set({
              name: payload.name
            })
            .then(function () {
              console.log('Document successfully written!')
            })
            .catch(function (error) {
              console.error('Error writing document: ', error)
            })
            toastr.success('Your Account was created successfully')
          }
        )
        .catch(
          error => {
            commit('setLoading', false)
            commit('setError', error)
            toastr.error('Oops' + error.message)
          }
        )
    }

我的SignUp.vue

export default {
    data () {
      return {
        name: null,
        email: null,
        password: '',
        confirmPassword: '',
        showPassword: false,
        showPasswordConfirm: false,
        loader: null
      }
    },
    methods: {
      onSignup () {
        this.$store.dispatch('signUserUp', {email: this.email, password: this.password})
      }
    }

这是我的文本字段，首先收集用户名，然后是用户的电子邮件和密码

<form @submit.prevent="onSignup">
                             <v-layout row>
                                   <v-flex xs12>
                                       <v-text-field
                                       name="name"
                                       label="Name"
                                       id="name"
                                       v-model="name"
                                       type="text"
                                       required></v-text-field>
                                   </v-flex>
                               </v-layout>
                               <v-layout row>
                                   <v-flex xs12>
                                       <v-text-field
                                       name="email"
                                       label="Email"
                                       id="email"
                                       v-model="email"
                                       type="email"
                                       required></v-text-field>
                                   </v-flex>
                               </v-layout>
                               <v-layout row>
                                   <v-flex xs12>
                                       <v-text-field
                                           :append-icon="showPassword ? 'visibility' : 'visibility_off'"
                                           :type="showPassword ? 'text' : 'password'"
                                           name="password input-10-2"
                                           label="Password"
                                           id="password"
                                           value=""
                                           class="input-group--focused"
                                           v-model="password"
                                           @click:append="showPassword = !showPassword"
                                           required
                                       ></v-text-field>
                                   </v-flex>
                               </v-layout>
                               <v-layout row>
                                   <v-flex xs12>
                                       <v-text-field
                                           :append-icon="showPasswordConfirm ? 'visibility' : 'visibility_off'"
                                           :type="showPasswordConfirm ? 'text' : 'password'"
                                           name="confirmPassword input-10-2"
                                           label="Confirm Password"
                                           id="confirmPassword"
                                           value=""
                                           class="input-group--focused"
                                           v-model="confirmPassword"
                                           @click:append="showPasswordConfirm = !showPasswordConfirm"
                                           :rules="[comparePasswords]"
                                       ></v-text-field>
                                   </v-flex>
                               </v-layout>
                               <v-layout row wrap>
                                   <v-flex xs12 sm6 class="text-xs-center text-sm-left">
                                       <v-btn
                                         color="#4527a0"
                                         type="submit"
                                         class="btn__content"
                                         :loading="loading"
                                         :disabled="loading"
                                         @click="loader = 'loading'"
                                         >
                                           Sign up
                                           <span slot="loader" class="custom-loader">
                                               <v-icon light>cached</v-icon>
                                           </span>
                                       </v-btn>
                                   </v-flex>
                                   <v-flex xs12 sm6 class="mt-3 text-xs-center text-sm-right">
                                       <router-link to="/signin" tag="span" style="cursor: pointer;">Already have an Account? Sign in</router-link>
                                   </v-flex>
                               </v-layout>
                           </form>

我希望用户在注册帐户时输入的名称被推送到我在profiles集合中的字段。但我得到了这个错误

---

使用无效数据调用DocumentReference.set（）。不支持的字段值：未定义（在字段名中找到）

在代码中，您正在使用

firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password).then(user=>{
  //getting your user details
});

但是没有

然后（用户=>{//user details}）

在firebase中的函数，用于在注册或登录后获取用户详细信息

有一个单独的功能来检查用户的身份验证状态，您可以从中获取用户详细信息，然后将其存储为Firestore。 您可以使用以下方法：-

注册用户：

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

注册后，您必须登录您的用户才能在authentication observer中获取用户详细信息

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    var displayName = user.displayName;
    var email = user.email;
    var emailVerified = user.emailVerified;
    var photoURL = user.photoURL;
    var isAnonymous = user.isAnonymous;
    var uid = user.uid;
    var providerData = user.providerData;
    // ...
  } else {
    // User is signed out.
    // ...
  }
});

对于用户登录：

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

当用户成功登录时，您可以在observer中获取有关该用户的信息

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    var displayName = user.displayName;
    var email = user.email;
    var emailVerified = user.emailVerified;
    var photoURL = user.photoURL;
    var isAnonymous = user.isAnonymous;
    var uid = user.uid;
    var providerData = user.providerData;
    // ...
  } else {
    // User is signed out.
    // ...
  }
});

---

在代码中，您正在使用

firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password).then(user=>{
  //getting your user details
});

但是没有

然后（用户=>{//user details}）

在firebase中的函数，用于在注册或登录后获取用户详细信息

有一个单独的功能来检查用户的身份验证状态，您可以从中获取用户详细信息，然后将其存储为Firestore。 您可以使用以下方法：-

注册用户：

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

注册后，您必须登录您的用户才能在authentication observer中获取用户详细信息

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    var displayName = user.displayName;
    var email = user.email;
    var emailVerified = user.emailVerified;
    var photoURL = user.photoURL;
    var isAnonymous = user.isAnonymous;
    var uid = user.uid;
    var providerData = user.providerData;
    // ...
  } else {
    // User is signed out.
    // ...
  }
});

对于用户登录：

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

当用户成功登录时，您可以在observer中获取有关该用户的信息

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    var displayName = user.displayName;
    var email = user.email;
    var emailVerified = user.emailVerified;
    var photoURL = user.photoURL;
    var isAnonymous = user.isAnonymous;
    var uid = user.uid;
    var providerData = user.providerData;
    // ...
  } else {
    // User is signed out.
    // ...
  }
});