Vue身份驗證

Question

我正在使用Vue建立這個小應用程序，但我無法使身份驗證工作。確切地說，重定向不起作用，我同時獲得了true和Authenticated的日誌，但我沒有被重定向到主頁(/)。但是當我打開應用程式時，我立即被帶到/login，這是可以的，我也希望如此，但正如我所說，當我嘗試登入時，我沒有被重定向。

這是我的登入元件和路由器。

import { createRouter, createWebHistory } 從 'vue-router'
import LoginView from '@/views/LoginView.vue'
import AboutView from '../views/AboutView.vue';
import isAuthenticated from '@/views/LoginView.vue';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: LoginView
    },
    {
      path: '/',
      name: 'Home',
      meta: {
        requiresAuth: true
      },
  
      component: AboutView,
      beforeEnter:(to,_,next)=>{
        if(to.meta.requiresAuth && !isAuthenticated.value){
          next('/login');
        }
        else{
          next();
          router.push('/');
        }
      }
     
    }
  ]
})

export default router

<template>
<div>
    <h2>輸入存取權杖以登入</h2>

    <hr />
    
    <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="登錄" class="btn btn-primary" />

            </form>
        </section>

    </div>
   
</div>

</template>
<script setup lang="ts">

import { ref} 從 'vue'

import router from '@/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('/');
  } else {
  }
};


</script>

Answer 1

如果只有router.push()不行

那麼嘗試使用類似vue-router的導入方式

import { useRouter } from 'vue-router'
const router = useRouter();

然後使用router.push('/')

#