Форма входа в систему ненадолго появляется снова, когда пользователь входит в систему - что вызывает это?

Question

У меня экран входа в систему, который на короткое время мигает после входа пользователя в систему. Это происходит не все время, но это раздражает. У меня возникли проблемы с выяснением того, что вызывает это, и поэтому я подумал, что попрошу великих специалистов по stackoverflow узнать, есть ли у них какие-либо советы о том, как исправить или устранить неполадки. Спасибо!

Вот моя проблема (как показано на скриншотах с некоторым кодом ниже):

Пользователь входит в систему:

Пользователь видит счетчик, поскольку его учетные данные аутентифицированы:

Пользователь снова ненадолго видит экран входа fla sh, прежде чем маршрутизатор перенаправит его на запрашиваемый контент.

Вот код для страницы Login.vue:

<template>
  <div class="col-lg-6">
    <template v-if="isLoading">
      <spinner key="spinner"></spinner>
    </template>
    <template v-else>
      <div key="form">
        <h1>Login</h1>
        <aside class="alert alert-danger" v-if="error">
          {{ error }}
        </aside>
        <form @submit.prevent="handlerLogin">
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" v-model="formData.email" />
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" v-model="formData.password" />
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      isLoading: false,
      formData: {
        email: null,
        password: null
      }
    }
  },
  computed: {
    error() {
      return this.$store.state.error
    }
  },
  methods: {
    async handlerLogin() {
      this.isLoading = true
      try {
        const payload = {
          email: this.formData.email,
          password: this.formData.password
        }
        await this.$store.dispatch('logInUser', payload)
        console.log('ready to fetch user profile')
        await this.$store.dispatch('fetchUserProfile')
        this.$router.replace('photos')
      } catch (error) {
        console.log(error)
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

А вот код действия logInUser из Магазин Vuex:

async logInUser({ commit }, payload) {
  commit('CLEAR_ERROR')
  try {
    const user = await auth.signInWithEmailAndPassword(payload.email, payload.password)
    commit('SET_CURRENT_USER', user.user)
  } catch (error) {
    commit('SET_ERROR', error)
  } 
}

Answer 1

Я думаю, что вы делаете ошибку, потому что ожидаете, что this.$router.replace будет блокировать, но это не так. ( docs ) Таким образом, this.isLoading = false from finally вызывается сразу после. Иногда Vue удается повторно визуализировать ваш компонент до того, как маршрутизатор завершит переход к новому представлению, а иногда это не так.

Вы можете создать третье состояние, которое просто проверяет, вошел ли пользователь в систему и отображает соответствующее сообщение. Имейте в виду, что если пользователь попадает на страницу входа в систему при входе в систему, это также должно делать что-то разумное. Другой вариант - переместить this.isLoading = false в ловушку, но имейте в виду, что если навигация не удалась, например, из-за (глобального) защиты маршрута, ваш компонент будет загружаться вечно без четкой обратной связи, что произошло. Третий вариант - сделать блокировку this.$router.replace, заключив ее в обещание или что-то в этом роде:

await new Promise((resolve, reject) => {
  this.$router.replace('photos', resolve, reject)
})