Vue-router导航卫士

Question

我想做一个路由器保护，但我不知道为什么我不能。 setAuthentication == true if部分没问题，但else部分不是。 我希望只有当setAuthentication为true时才能访问KrediForm页面 此代码必须有效，但它不起作用我不知道为什么有另一种方法来制作路由器防护

如果你不明白请联系我

现在我有这个代码

<template>
<div>

    <h1>Login page</h1>
    <input type="text" name="username" v-model="input.username" placeholder="Username" />
    <input type="password" name="password" v-model="input.password" placeholder="Password" />
    <button type="button" @click="login">Login</button>
</div>

export default {
    name: 'Login',
    data() {
        return {
            input: {
                username: "",
                password: ""
            }
        }
    },
    methods: {
        login() {
            if(this.input.username == "admin" && this.input.password == "pass") {
                this.$store.commit("setAuthentication", true);
                this.$router.replace({ name: "KrediForm"});

                // HERE WORKS FOR ME 

            } else {
                console.log("The username or password is not correct");
            }

        }
    }
}

main.js 文件

import { createApp } from 'vue';
import Vue3Autocounter from 'vue3-autocounter';
import VuePaycard from "vue-paycard";

import router from "@/router";
import Vuex from 'vuex'



import App from './App.vue';

import "@/assets/css/starter_style.css";
import "@/assets/css/main.css";
import veProgress from "vue-ellipse-progress";

const store = new Vuex.Store(
   {
       state: {
        authenticated: false
    },
    mutations: {
        setAuthentication(state, status) {
            state.authenticated = status;
        }
    }
  }
 )


  const app = createApp(App);
  app.component('vue3-autocounter', Vue3Autocounter)
  app.use(router);
  app.use(Vuex);
  app.use(veProgress);
  app.use(VuePaycard);

  app.use(store);


   app.mount("#app");

router.js 这是最近几天困扰我的问题

import {createRouter, createWebHistory} from "vue-router";
import store from '@/main'

const routes = [
  {
    name: "KrediForm",
    path: "/Kredi_Form",
    component: () => import("@/views/Kredi_Form"),

     <!-- HERE MY ISSUE -->
    beforeRouteEnter: (to, from, next) => {
        if(store.state.authenticated == true) {
            next({name: 'Login'});
            console.log
        } else {
            next();
        }
    }
  },
  {
    name: "DownloadSection",
    path: "/DownloadSection",
    component: () => import("@/views/DownloadSection")
  },
  {
    name: "deneme",
    path: "/deneme",
    component: () => import("@/views/deneme"),
   },

  ];
   const router = createRouter({
       routes,
       history: createWebHistory()
   });


    // Template must be like
    // router.beforeEach((to, from, next) => {
     //     if(loggedIn && to.path !== '/login') {
    //         next();
        //     } else {
      //         next('/login');
     //     }
    // })


export default router;

Answer 1

首先，我认为您错误地使用了路由前防护。 这里的关键字是beforeEnter而不是beforeRouteEnter基于docs 。

您还需要像这样正确导出和导入：

• 出口

export const store = ...

• 进口

import {store} from '@/main'

Answer 2

这个

解决了我的问题，复制一下