Pengesahan Vue

Question

Saya sedang membina apl kecil ini menggunakan Vue, tetapi saya tidak dapat memastikan pengesahan berfungsi. Tepatnya, ubah hala tidak berfungsi, saya mendapat log untuk kedua-dua benar dan Disahkan, tetapi saya tidak dialihkan ke halaman utama (/). Tetapi apabila saya membuka aplikasi saya terus dibawa ke /login yang ok dan saya juga mahukan itu tetapi seperti yang saya katakan apabila saya cuba log masuk saya tidak dialihkan.

Ini ialah komponen log masuk dan penghala saya.

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

penghala const = createRouter({
  sejarah: createWebHistory(import.meta.env.BASE_URL),
  laluan: [
    {
      laluan: '/log masuk',
      nama: 'Log Masuk',
      komponen: LoginView
    },
    {
      laluan: '/',
      nama: 'Rumah',
      meta: {
        memerlukanAuth: benar
      },
  
      komponen: AboutView,
      beforeEnter:(to,_,next)=>{
        if(to.meta.requiresAuth && !isAuthenticated.value){
          seterusnya('/log masuk');
        }
        lain{
          seterusnya();
          router.push('/');
        }
      }
     
    }
  ]
})

eksport penghala lalai</pra>
<pre class="brush:php;toolbar:false;"><template>
<div>
    <h2>Masukkan token akses untuk log masuk</h2>

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

        <section id="loginForm">

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

                    <label><b>Token Akses</b></label>
                    <masukkan v-model="accessToken" type="password" class="form-control" />

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

            </form>
        </section>

    </div>
   
</div>

</template>
<penyiapan skrip lang="ts">

import { ref} daripada 'vue'

import penghala daripada '@/router/index'

const isAuthenticated = ref(false);

const accessToken = ref('');

const checkAccessToken = () =>
  if (accessToken.value === '123') {
      isAuthenticated.value = benar;
      console.log(isAuthenticated.value);
      console.log('disahkan');
      router.push('/');
  } lain {
  }
};


</script>

Answer 1

Sekiranya router.push()tidak berkesan

Kemudian cuba gunakan kaedah import yang serupa dengan vue-router

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

Kemudian gunakan router.push('/')