Vue-Authentifizierung
P粉765684602
P粉765684602 2023-08-18 10:33:04
0
1
587
<p>Ich erstelle diese kleine App mit Vue, aber die Authentifizierung funktioniert nicht. Um genau zu sein, die Weiterleitung funktioniert nicht. Ich erhalte die Protokolle sowohl für „true“ als auch für „Authentifiziert“, werde aber nicht zur Homepage (/) weitergeleitet. Aber wenn ich die App öffne, werde ich sofort zu /login weitergeleitet, was in Ordnung ist und mir auch gefallen würde, aber wie gesagt, wenn ich versuche, mich anzumelden, werde ich nicht weitergeleitet. </p> <p>Dies ist meine Anmeldekomponente und mein Router. </p> <pre class="brush:php;toolbar:false;">import { createRouter, createWebHistory } from 'vue-router' LoginView aus „@/views/LoginView.vue“ importieren Importiere AboutView aus '../views/AboutView.vue'; import isAuthenticated from '@/views/LoginView.vue'; const router = createRouter({ Verlauf: createWebHistory(import.meta.env.BASE_URL), Routen: [ { Pfad: '/login', Name: 'Anmelden', Komponente: LoginView }, { Weg: '/', Name: 'Zuhause', Meta: { erfordertAuth: true }, Komponente: AboutView, beforeEnter:(to,_,next)=>{ if(to.meta.requiresAuth && !isAuthenticated.value){ next('/login'); } anders{ nächste(); router.push('/'); } } } ] }) Standardrouter exportieren</pre> <pre class="brush:php;toolbar:false;"><template> <div> <h2>Zugriffstoken zum Anmelden eingeben</h2> <hr /> <div class="col-md-8"> <Abschnitts-ID="loginForm"> <form @submit.prevent="checkAccessToken"> <div class="form-group"> <label><b>Zugriffstoken</b></label> <input v-model="accessToken" type="password" class="form-control" /> </div> <input type="submit" value="Login" class="btn btn-primary" /> </form> </Abschnitt> </div> </div> </template> <script setup lang="ts"> { ref} aus 'vue' importieren Router aus '@/router/index' importieren const isAuthenticated = ref(false); const accessToken = ref(''); const checkAccessToken = () => if (accessToken.value === '123') { isAuthenticated.value = true; console.log(isAuthenticated.value); console.log('verifiziert'); router.push('/'); } anders { } }; </script></pre> <p><br /></p>
P粉765684602
P粉765684602

Antworte allen(1)
P粉141455512

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

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

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

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

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage