Vue.js 当用户登录时，登录表单会短暂重新出现——这是什么原因造成的？

我有一个登录屏幕，在用户登录后会短暂闪烁。这种情况并不总是发生，但很烦人。我很难弄清楚是什么导致了这种情况，所以我想我应该问问stackoverflow的伟人，看看他们是否有关于如何修复或排除故障的技巧。谢谢

这是我的问题（如下面的一些代码截图所示）：

用户登录：

用户在验证其凭据时看到微调器：

在路由器将用户重定向到请求的内容之前，用户再次看到登录屏幕短暂闪烁。

以下是

Login.vue

页面的代码：

---

我认为您所犯的错误是，您希望

这个。$router.replace

被阻塞，而事实并非如此。（）因此，从

finally

中调用

this.isLoading=false

后立即调用。有时，Vue会在路由器完成转换到新视图之前重新渲染组件，有时则不会

您可以创建第三种状态，只需检查用户是否已登录并显示适当的消息。请记住，如果用户在登录时进入登录页面，这也需要做一些明智的事情。另一个选项是将

this.isLoading=false

移动到catch，但请记住，如果导航失败，例如由于（全局）路由保护，您的组件将永久加载，而不会清楚地反馈发生了什么。第三种选择是将

这个.$router.replace

阻塞封装在承诺或其他内容中：

等待新的承诺（（解决、拒绝）=>{
此.$router.replace（'photos'，resolve，reject）
})

我认为您所犯的错误是，您希望

这个。$router.replace

被阻塞，而事实并非如此。（）因此，从

finally

中调用

this.isLoading=false

后立即调用。有时，Vue会在路由器完成转换到新视图之前重新渲染组件，有时则不会

您可以创建第三种状态，只需检查用户是否已登录并显示适当的消息。请记住，如果用户在登录时进入登录页面，这也需要做一些明智的事情。另一个选项是将

this.isLoading=false

移动到catch，但请记住，如果导航失败，例如由于（全局）路由保护，您的组件将永久加载，而不会清楚地反馈发生了什么。第三种选择是将

这个.$router.replace

阻塞封装在承诺或其他内容中：

等待新的承诺（（解决、拒绝）=>{
此.$router.replace（'photos'，resolve，reject）
})

很明显，

this.isLoading=false

，因为这就是您的

v-if

中的内容。您是否考虑过添加第三个状态“isLoggedIn”，该状态仅在“您已通过身份验证。我们正在加载照片”行中显示一条消息。或者将

this.isLoading

行移动到catch，这样在路由器加载另一个视图之前，组件将永远处于加载动画中？显然

this.isLoading=false

，因为这就是

v-if

中的内容。您是否考虑过添加第三个状态“isLoggedIn”，该状态仅在“您已通过身份验证。我们正在加载照片”行中显示一条消息。或者将

this.isLoading

行移动到catch，使组件永远处于加载动画中，直到路由器加载另一个视图？

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

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