Vuex и firebase: идентификатор пользователя не определен в базе данных firebase

Question

Я создаю веб-сайт электронной коммерции.

Теперь я закончил создание новой учетной записи с адресом электронной почты и паролем.

И я хочу вставить адрес электронной почты пользователя, полное имя и отметка времени в базе данных.

Как вы можете видеть на картинке ниже, я мог видеть данные USER в консоли google chrome dev.

But when I checked the firebase database in the browser, I cannot see the user id. And instead, I see undefined in the user id column.

Now I am on the step3 process.

3. Добавить данные пользователя в базу данных

Я не могу понять, почему это происходит, поэтому я надеюсь, что вы можете мне помочь.

Это это мой магазин / индекс. js файл.

import fireApp from '@/plugins/firebase'


export const state = () => ({
    
    user: null,
    error: null,
    busy: false,
    jobDone: false
})

export const mutations = {
   
    setUser (state, payload) {
        state.user = payload
    },
    setError (state, payload) {
        state.error = payload
    },
    clearError (state, payload) {
        state.error = null
    },
    setBusy (state, payload) {
        state.busy = payload
    },
    setJobDone (state, payload) {
        state.jobDone = payload
    },
}

export const actions = {
   
    signUpUser({commit}, payload) {
        commit('setBusy', true)
        commit('clearError')
        //1.Signup new user.
        //2.Update firebase user profile & set local user data.
        //3.Add user data into database
        //4.Attach user to consumer group
        let newUser = null
        fireApp.auth().createUserWithEmailAndPassword(payload.email, payload.password)
            .then(user => {
                newUser = user
                var user = fireApp.auth().currentUser;
                user.updateProfile({ displayName: payload.fullname })
                const currentUser = {
                    id: user.uid,
                    email: payload.email,
                    name: payload.fullname,
                    role: 'consumer'
                }
                console.log('USER', currentUser)
                commit('setUser', currentUser)
            })
            .then(() => {
                const userData = {
                    email: payload.email,
                    fullname: payload.fullname,
                    createdAt: new Date().toISOString()
                }
                
                fireApp.database().ref(`users/${newUser.uid}`).set(userData)
            })
            .then(() => {
                commit('setJobDone', true)
                commit('setBusy', false)
            })
            .catch(error => {
                commit('setBusy', false)
                commit('setError', error)
            })
    }
}

export const getters = {
    
    user (state) {
        return state.user
    },
    error (state) {
        return state.error
    },
    busy (state) {
        return state.busy
    },
    jobDone (state) {
        return state.jobDone
    }
}



  

Answer 1

Это связано с тем, что обещание, возвращаемое методом createUserWithEmailAndPassword(), разрешается с помощью объекта UserCredential, а не объекта User.

Вы должны используйте свойство user объекта UserCredential следующим образом:

    let newUser = null
    fireApp.auth().createUserWithEmailAndPassword(payload.email, payload.password)
        .then(userCredential => {
            newUser = userCredential.user;
            //...

Обратите внимание, что вам не нужно набирать fireApp.auth().currentUser, чтобы получить user.

При использовании метода createUserWithEmailAndPassword() при успешном создании учетной записи пользователя этот пользователь также будет вошел в ваше приложение, поэтому просто введите пользователю userCredential.user, как описано выше.

Кроме того, обратите внимание, что updateProfile() метод является асинхронным и возвращает Promise, который необходимо включить в цепочку обещаний.

Таким образом, следующее должно помочь (непроверено):

  signUpUser({commit}, payload) {
      commit('setBusy', true)
      commit('clearError')
      //1.Signup new user.
      //2.Update firebase user profile & set local user data.
      //3.Add user data into database
      //4.Attach user to consumer group
      let user = null;
      fireApp.auth().createUserWithEmailAndPassword(payload.email, payload.password)
          .then(userCredential => {
              user = userCredential.user;
              return user.updateProfile({ displayName: payload.fullname });
          })
          .then(() => {
              const currentUser = {
                  id: user.uid,
                  email: payload.email,
                  name: payload.fullname,
                  role: 'consumer'
              }
              console.log('USER', currentUser)
              commit('setUser', currentUser)
              const userData = {
                  email: payload.email,
                  fullname: payload.fullname,
                  createdAt: new Date().toISOString()
              }

              return fireApp.database().ref(`users/${user.uid}`).set(userData)
          })
          .then(() => {
              commit('setJobDone', true)
              commit('setBusy', false)
          })
          .catch(error => {
              commit('setBusy', false)
              commit('setError', error)
          })
  }