Vue-router navigation Guard

Question

I wanna make a router guard but I don't know why I cant. setAuthentication == true if part is okay but else part is not. I want KrediForm page cant reachable only when setAuthentication is true This code must be work but it won't work ı don't know why Is there another way to make a router guard

IF you don't understand pls contact me

Now I have this code

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

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 this is what trouble me the last few days

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

first i think you are using pre-route guard wrong. keyword in here is beforeEnter and not beforeRouteEnter based on docs .

also you need to export and import properly like this:

• export

export const store = ...

• import

import {store} from '@/main'

Answer 2

this

solved my problem, copy that