firebase.auth (). onAuthStateChanged получает значение NULL после refre sh страницы в vuex - PullRequest
Новая
       18

firebase.auth (). onAuthStateChanged получает значение NULL после refre sh страницы в vuex

0 голосов
/ 07 апреля 2020

Я использую аутентификацию Vuex и Firebase. Я застрял при перезагрузке страницы. firebase.auth (). onAuthStateChanged требуется время для ответа. Но мне нужно в то же время, когда перезагрузить страницу. Я видел много уроков в inte rnet, большинство из них - защита роутера, но я этого не хочу. У меня есть какой-то маршрут, в котором у пользователя есть логин, и я могу перейти к этому маршруту.

Приложение. vue, куда я подаю заявку. 

created () {
    firebase.auth().onAuthStateChanged(async user =>{
        if (user){
          await this.$store.dispatch('autoSignIn',user)
        }
      })
  }

Вот мой триггер vuex action theat, когда перезагрузка страницы для автоматического входа в систему, если пользователь вошел в систему до перезагрузки страницы. 

 autoSignIn ({commit}, payload) {
            commit('setUser',{email:payload.email, userId:payload.uid})

        }

Это мой получатель 

 isAuthenticated:state => {
    return state.user !== null && state.user !== undefined ? state.user : null
 }

Здесь я вызываю мой получатель isAuthenticated. 

  getEventsByUser({getters,commit}){

            let data = [];

            firebase.database().ref('usuario/' + getters.isAuthenticated.userId + '/eventos/')
                .on("value", eventos =>{
                     eventos.forEach(evento =>{
                        data.push({"id":evento.key, ...evento.val()})
                    });
                    commit('setEventsByUser',data)
                })

        },

И это компонент, который отправляет действие 

<template>
    <div>
        <div v-for="(event,id) in getEventsByUser" :key="id">
            {{event}}
        </div>
    </div>
</template>

<script>
    export default {
        name: "MyEvents",

        computed:{
            getEventsByUser(){
                return  this.$store.getters.getEventsByUser;
            },
        },
        mounted() {
            this.$store.dispatch('getEventsByUser')
        },



    }

Вот ошибка, когда я перезагружаю страницу enter image description here

1 Ответ

0 голосов
/ 07 апреля 2020

Когда страница загружается, Firebase проверяет, действителен ли сохраненный для пользователя ID-токен. Для этого требуется, чтобы он вызывал сервер, поэтому это может занять некоторое время. Во время этой проверки пользователь будет нулевым, поэтому ваш код должен обрабатывать это везде.

В вашем обработчике onAuthStateChanged вы правильно обрабатываете это с помощью: 

firebase.auth().onAuthStateChanged(async user =>{
    if (user){

Но затем в getEventsByUser вы предполагаете, что есть пользователь, который (как показано в сообщении об ошибке) не соответствует действительности. Таким образом, вы захотите добавить проверку, чтобы увидеть, есть ли пользователь, прежде чем присоединять слушателя к базе данных: 

getEventsByUser({getters,commit}){
    let data = [];
    if (getters.isAuthenticated) {
        firebase.database().ref('usuario/' + getters.isAuthenticated.userId + '/eventos/')
        ...
...