Authentification Vue

Question

Je construis cette petite application en utilisant Vue, mais je n'arrive pas à faire fonctionner l'authentification. Pour être précis, la redirection ne fonctionne pas, j'obtiens à la fois des journaux vrais et authentifiés, mais je ne suis pas redirigé vers la page d'accueil (/). Mais lorsque j'ouvre l'application, je suis immédiatement redirigé vers /login, ce qui est ok et j'aimerais ça aussi, mais comme je l'ai dit, lorsque j'essaie de me connecter, je ne suis pas redirigé.

Voici mon composant de connexion et mon routeur.

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

const routeur = créerRouter({
  historique : createWebHistory(import.meta.env.BASE_URL),
  itinéraires : [
    {
      chemin : '/connexion',
      nom : 'Connexion',
      composant : LoginView
    },
    {
      chemin: '/',
      nom : 'Maison',
      méta : {
        nécessiteAuth : vrai
      },
  
      composant : AboutView,
      beforeEnter:(to,_,next)=>{
        if(to.meta.requiresAuth && !isAuthenticated.value){
          suivant('/connexion');
        }
        autre{
          suivant();
          routeur.push('/');
        }
      }
     
    }
  ]
})

exporter le routeur par défaut

<template>
<div>
    <h2>Entrez le jeton d'accès pour vous connecter</h2>

    <heure />
    
    <div class="col-md-8">

        <id de section="loginForm">

            <form @submit.prevent="checkAccessToken">
                <div class="form-group">

                    <label><b>Jeton d'accès</b></label>
                    <input v-model="accessToken" type="password" class="form-control" />

                </div>
                
                <input type="submit" value="Connexion" class="btn btn-primary" />

            </formulaire>
        ≪/section>

    </div>
   
</div>

</modèle>
<configuration du script lang="ts">

importer {ref} depuis 'vue'

importer le routeur depuis '@/router/index'

const isAuthenticated = ref(false);

const accessToken = ref('');

const checkAccessToken = () =>
  si (accessToken.value === '123') {
      isAuthenticated.value = vrai ;
      console.log(isAuthenticated.value);
      console.log('vérifié');
      routeur.push('/');
  } autre {
  }
} ;


</script>

Answer 1

Si seulement router.push()ne marche pas

Essayez ensuite d'utiliser une méthode d'importation similaire à vue-router

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

Alors utilisez router.push('/')