사용자가 로그인할 때 로그인 양식이 잠깐 나타납니다. 원인은 무엇입니까?

사용자가 로그인할 때 로그인 양식이 잠깐 나타납니다. 원인은 무엇입니까?

로그인 화면이 표시되며 사용자가 로그인하면 잠시 깜박입니다.이런 일이 항상 있는 것은 아니지만, 귀찮다.이 문제의 원인을 파악하는 데 어려움을 겪고 있기 때문에 스택오버플로우 담당자에게 수리나 트러블 슈팅에 관한 힌트가 있는지 알아보려고 합니다.감사합니다!

다음은 제 문제(아래 코드와 함께 스크린샷에 표시됨)입니다.

사용자 로그인:

자격 증명이 인증되면 다음과 같이 spinner가 표시됩니다.

사용자는 라우터가 요청된 콘텐츠로 리다이렉트하기 전에 로그인 화면이 다시 잠깐 깜박입니다.

여기 코드입니다.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>

그리고 여기 그logInUserVuex 스토어의 작업 코드:

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

내 생각에 네가 저지른 실수는 네가 내 생각에this.$router.replace차단할 수 있지만, 그렇지 않습니다.(docs) 따라서this.isLoading = false부터finally바로 뒤에 호출됩니다.라우터가 새로운 뷰로 이행이 완료되기 전에 Vue가 컴포넌트를 재렌더할 수 있는 경우도 있고 그렇지 않은 경우도 있습니다.

사용자가 로그인하고 있는지 확인하고 적절한 메시지를 표시하는 세 번째 상태를 만들 수 있습니다.사용자가 로그인 했을 때 로그인 페이지에 액세스 하는 경우는, 이 조작에도 적절한 조작이 필요하게 됩니다.또 다른 옵션은 이동입니다.this.isLoading = false단, 예를 들어 (글로벌)루트 가드 때문에 네비게이션에 장애가 발생했을 경우 컴포넌트는 무슨 일이 일어났는지 명확한 피드백 없이 영속적으로 로딩됩니다.세 번째 옵션은 다음과 같습니다.this.$router.replace약속 같은 것으로 포장하여 차단합니다.

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

언급URL : https://stackoverflow.com/questions/62447570/login-form-briefly-reappears-when-user-logs-in-what-is-causing-this