Vue 인증

Question

Vue를 사용하여 이 작은 앱을 만들고 있는데 인증이 작동하지 않습니다. 정확하게 말하면 리디렉션이 작동하지 않고 true 로그와 인증된 로그가 모두 표시되지만 홈 페이지(/)로 리디렉션되지 않습니다. 하지만 앱을 열면 즉시 /login으로 이동합니다. 이는 괜찮습니다. 저도 그렇게 하고 싶지만 로그인하려고 할 때 말했듯이 리디렉션되지 않습니다.

이것은 내 로그인 구성 요소와 라우터입니다.

'vue-router'에서 { createRouter, createWebHistory } 가져오기
'@/views/LoginView.vue'에서 LoginView 가져오기
'../views/AboutView.vue'에서 AboutView를 가져옵니다.
'@/views/LoginView.vue'에서 isAuthenticated를 가져옵니다.

const 라우터 = createRouter({
  기록: createWebHistory(import.meta.env.BASE_URL),
  경로: [
    {
      경로: '/로그인',
      이름: '로그인',
      구성 요소: LoginView
    },
    {
      길: '/',
      이름: '집',
      메타: {
        인증 필요: 사실
      },
  
      구성요소: AboutView,
      beforeEnter:(to,_,next)=>{
        if(to.meta.requiresAuth && !isAuthenticated.value){
          다음('/로그인');
        }
        또 다른{
          다음();
          router.push('/');
        }
      }
     
    }
  ]
})

기본 라우터 내보내기

<템플릿>

    
로그인하려면 액세스 토큰을 입력하세요

    <시간 />
    
    


        


            

                


                    액세스 토큰
                    

                
                
                

            
        

    
   



<스크립트 설정 lang="ts">

'vue'에서 { ref} 가져오기

'@/router/index'에서 라우터 가져오기

const isAuthenticated = ref(false);

const accessToken = ref('');

const checkAccessToken = () =>
  if (accessToken.value === '123') {
      isAuthenticated.value = true;
      console.log(isAuthenticated.value);
      console.log('확인됨');
      router.push('/');
  } 또 다른 {
  }
};




            

Answer 1

만 router.push()작동하지 않는 경우

그런 다음 vue-router와 유사한 가져오기 방법을 사용해 보세요

으아악

그런 다음 router.push('/')

을 사용하세요.