Vue-Authentifizierung

Question

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.

Dies ist meine Anmeldekomponente und mein Router.

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

<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>

Answer 1

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

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

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

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