<p>Vue를 사용하여 이 작은 앱을 만들고 있는데 인증이 작동하지 않습니다. 정확하게 말하면 리디렉션이 작동하지 않고 true 로그와 인증된 로그가 모두 표시되지만 홈 페이지(/)로 리디렉션되지 않습니다. 하지만 앱을 열면 즉시 /login으로 이동합니다. 이는 괜찮습니다. 저도 그렇게 하고 싶지만 로그인하려고 할 때 말했듯이 리디렉션되지 않습니다. </p> <p>이것은 내 로그인 구성 요소와 라우터입니다. </p> <pre class="brush:php;toolbar:false;">'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('/'); } } } ] }) 기본 라우터 내보내기</pre> <pre class="brush:php;toolbar:false;"><템플릿> <div> <h2>로그인하려면 액세스 토큰을 입력하세요</h2> <시간 /> <div class="col-md-8"> <section id="loginForm"> <form @submit.prevent="checkAccessToken"> <div class="form-group"> <label><b>액세스 토큰</b></label> <input v-model="accessToken" type="password" class="form-control" /> </div> <input type="submit" value="Login" class="btn btn-primary" /> </양식> </섹션> </div> </div> </템플릿> <스크립트 설정 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('/'); } 또 다른 { } }; <p><br /></p>