<p>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é. </p> <p>Voici mon composant de connexion et mon routeur. </p> <pre class="brush:php;toolbar:false;">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</pre> <pre class="brush:php;toolbar:false;"><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></pre> <p><br /></p>

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