Vue身份验证
P粉765684602
P粉765684602 2023-08-18 10:33:04
[Vue.js讨论组]

我正在使用Vue构建这个小应用程序,但我无法使身份验证工作。确切地说,重定向不起作用,我同时获得了true和Authenticated的日志,但我没有被重定向到主页(/)。但是当我打开应用程序时,我立即被带到/login,这是可以的,我也希望如此,但正如我所说,当我尝试登录时,我没有被重定向。

这是我的登录组件和路由器。

import { createRouter, createWebHistory } from '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} from '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>


P粉765684602
P粉765684602

全部回复(1)
P粉141455512

如果只有router.push()不起作用

那么尝试使用类似于vue-router的导入方式

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号