nuxt auth 모듈을 사용하여 인증 상태를 검출하기 위해 새로 고침 필요

nuxt auth 모듈을 사용하여 인증 상태를 검출하기 위해 새로 고침 필요

내 앱은 페이지를 완전히 새로 고치지 않고 사용자가 로그인할 때 발생하는 상태 변화를 감지할 수 없습니다.새로 고치면 모든 것이 올바르게 표시됩니다.Nuxt와 여기에 기재되어 있는 인증 모듈을 사용하고 있습니다.https://auth.nuxtjs.org/

다음은 상태 변경을 감지할 수 없는 v-if 문입니다.

  <template v-if="$auth.$state.loggedIn">
    <nuxt-link
      to="/profile"
    >
      Hello, {{ $auth.$state.user.name }}
    </nuxt-link>
  </template>
  <template v-else>
    <nuxt-link
      to="/logIn"
    >
      Sign In
    </nuxt-link>
  </template>

로그인 페이지 로그인 방법은 다음과 같습니다.

  methods: {
    async onLogin() {
      try{

        this.$auth.loginWith("local", {
          data: {
            email: this.email,
            password: this.password
          }
        });

        this.$router.push("/");

      }catch(err){
        console.log(err);
      }

    }
  }

계산된 속성을 통해 상태를 가져오려고 했지만 동일한 결과를 받았습니다.Chrome Dev Tools의 '어플리케이션' 탭에서 올바르게 로그인/로그아웃되었음을 나타내는 vuex 스토어 데이터 변경을 볼 수 있지만 Vue Dev는 항상 로그인 중임을 나타내는 것 같습니다.그냥 버그가 있는 건지는 모르겠지만..

로그아웃할 때도 반대로 같은 문제가 발생합니다.방법은 다음과 같습니다.

async onLogout() {
  try{
    await this.$auth.logout();
  }catch(err){
    console.log(err);
  }
}

더 자세한 정보를 제공하게 되어 기쁩니다.

1. 인store/index.js다음을 추가합니다.

    export const getters = {
      isAuthenticated(state) {
      return state.auth.loggedIn
     },
      loggedInUser(state) {
      return state.auth.user
     },
   };
   

2. 페이지에서 인증을 받아야 합니다.

   • 미들웨어 인증을 다음과 같이 사용합니다.middleware: 'auth'
   • 사용하다import { mapGetters } from 'vuex'
   • 계산 덧셈으로...mapGetters(['isAuthenticated', 'loggedInUser']),

3. 로그를 사용할 수 있습니다.InUser: 사용자 세부 정보를 가져오거나 isAuthenticated 여부를 확인합니다.

계산한 맵게터를 Import하고 있는 한 로그아웃은 정상적으로 동작합니다.

Vue의 반응성 시스템이 부족할 수 있으며 수동으로 리렌더를 트리거하기만 하면 됩니다.이렇게 하기 위한 가장 간단한 방법은 기능 로직을 로직으로 감싸는 것입니다.setTimeout()

setTimeout(async () => {
   await this.$auth.logout();
}, 0);

언급URL : https://stackoverflow.com/questions/60308981/refresh-required-to-detect-authentication-state-using-nuxt-auth-module