Question

Vuex 和 firebase：firebase 数据库中未定义用户 ID

2020-08-03

280

javascript firebase vue.js firebase-realtime-database firebase-authentication

我正在创建一个电子商务网站。

现在我已经完成了使用电子邮件和密码创建新帐户。

我想在数据库中插入用户电子邮件、全名和时间戳。

如下图所示，我可以在 Google Chrome 开发控制台中看到用户数据。

但是当我在浏览器中检查 Firebase 数据库时，我看不到用户 ID。相反，我在用户 ID 列中看到未定义。

现在我正在进行第 3 步。

将用户数据添加到数据库中

我不明白为什么会发生这种情况，所以我希望你能帮助我。

这是我的 store/index.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() 方法返回的 promise 使用 UserCredential 对象解析，而不是 User 对象。

您应该使用 UserCredential 的 user 属性，如下所示：

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