Vue Vuex Firebase Auth электронной почты войти и обновить имя пользователя - PullRequest
Новая
       28

Vue Vuex Firebase Auth электронной почты войти и обновить имя пользователя

0 голосов
/ 10 мая 2018

У меня установлена ​​настройка аутентификации firebase, однако я пытаюсь обновить имя пользователя, прежде чем установить его в текущее состояние. Когда я запускаю все перед обновлением, все работает нормально, но у меня нет имени пользователя. Я довольно плохо знаком с обещаниями js, поэтому я попытался запустить функцию и вернуть функцию, но ни одна из них не сработала. Я ожидаю, что к тому моменту, когда на экране панели мониторинга появится имя пользователя.

Ниже приведен код для регистрации по электронной почте, который работает без имени пользователя.

магазин / пользователь / index.js 

signUserUp ({commit}, payload) {
  commit('setLoading', true)
  commit('clearError')
  firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
    .then(function (user) {
      return user.updateProfile({
        displayName: payload.username
      })
    })
    .then(
      profile => {
        commit('setLoading', false)
        const newUser = {
          id: profile.uid,
          name: profile.username,
          email: profile.email,
          photoUrl: profile.photoURL
        }
        commit('setUser', newUser)
      }
    )
    .catch(
      error => {
        commit('setLoading', false)
        commit('setError', error)
        console.log(error)
      }
    )
}

Это код, который возвращает ошибку и не обновляет имя пользователя, пока я не обновлю. 

signUserUp ({commit}, payload) {
  commit('setLoading', true)
  commit('clearError')
  firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
    .then(function (user) {
        return user.updateProfile({
          displayName: payload.username
        })
    .then(
      profile => {
        commit('setLoading', false)
        const newUser = {
          id: profile.uid,
          name: payload.username,
          email: profile.email,
          photoUrl: profile.photoURL
        }
        commit('setUser', newUser)
      }
    )
    .catch(
      error => {
        commit('setLoading', false)
        commit('setError', error)
        console.log(error)
      }
    )
},

Мой взгляд действительно прост, просто отображая данные. 

<template>
  <div>
    <h1>Dashboard</h1>
    <button @click="onLogout">Logout</button>
    <hr>
    <app-alert v-if="error" @dismissed="onDismissed" :text="error.message"></app-alert>
    <img :if="user.photoURL" :src="user.photoUrl">
    <h4><b>Display Name :</b> {{ user.name }}</h4>
    <h4><b>Email :</b> {{ user.email }}</h4>
    <h4><b>Email Verified :</b> {{ user.emailVerified }}</h4>
    <h4><b>User ID :</b> {{ user.id }}</h4>
  </div>
</template>

<script>
export default {
  date () {
    return {}
  },
  computed: {
    user () {
      return this.$store.getters.user
    },
    error () {
      return this.$store.getters.error
    }
  },
  methods: {
    onLogout () {
      this.$store.dispatch('logout')
      this.$router.push('/')
    },
    onDismissed () {
      this.$store.dispatch('clearError')
    }
  }
}
</script>

Ошибки, которые я получаю, являются предупреждением о том, что

Невозможно прочитать свойство 'uid' из неопределенного

А также, имя пользователя не отображается на компоненте страницы, даже если оно отображается при обновлении страницы.

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

.then(function (user) {
  return user.updateProfile({
    displayName: payload.username
  })
})

1 Ответ

0 голосов
/ 10 мая 2018

Похоже, моя проблема была в том, как я упорядочивал свои функции, вместо того, чтобы возвращать функцию user.updateProfile, я мог вкладывать свой вызов updateProfile, как показано ниже, кроме того, я вызывал имя пользователя в качестве имени пользователя объекта, когда это должно было произойти. было displayName. 

signUserUp ({commit}, payload) {
  commit('setLoading', true)
  commit('clearError')
  firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
    .then(function (user) {
      user.updateProfile({
        displayName: payload.username
      }).then(
        () => {
          commit('setLoading', false)
          const newUser = {
            id: user.uid,
            name: user.displayName,
            email: user.email,
            emailVerified: user.emailVerified
          }
          commit('setUser', newUser)
        }
      ).catch(
        error => {
          commit('setLoading', false)
          commit('setError', error)
          console.log(error)
        }
      )
    })
    .catch(
      error => {
        commit('setLoading', false)
        commit('setError', error)
        console.log(error)
      }
    )
},
...