我尝试用以下逻辑在vuejs中创建一个导航卫士：阻止所有必需的auth路由，并在用户未通过身份验证时重定向到login，但允许用户登录的登录路由除外，它不会挂起（循环）（这是我一直坚持的部分）。当用户通过身份验证并尝试访问受限路由或非受限路由时，允许访问。
所以基本上我希望允许用户访问非限制路由，允许登录，并在未经身份验证时阻止对限制路由的访问。
如果我对我的逻辑没有意义，请纠正我，因为我已经在这个问题上停留了一段时间，可能需要其他人的观点。
这是密码。
代码主要来自我在bezkoder.com上遵循的教程，然后我参加了maximilian schwarzmuller的udemy上的vue课程，他向我介绍了导航卫士。这是我第一次使用它们，所以请耐心等待。
主要.js

import { createApp } from 'vue'
import router from './router/index.js';
import App from './App.vue'
import TheNav from './components/TheNav.vue'
import  { store } from './store/index.js';
import VueParticles from 'vue-particles';

var app = createApp(App);

router.beforeEach((to, from, next) => {
    if(to.path !== '/login' && to.meta.requiredAuth && !store.getters.isAuthenticated){
        next('/login');
        return
    } else if (from.path === '/login' && to.meta.requiredAuth && store.getters.isAuthenticated){
        next();
        return
    } else if (!to.meta.requiredAuth && store.getters.isAuthenticated){
        next();
        return
    } else if (to.meta.requiredAuth && store.getters.isAuthenticated){
        next();
        return
    } else {
        next();
    }
})

app.use(router);
app.use(store);

app.config.productionTip = false;

app.component('app-nav', TheNav);

app.use(VueParticles);

app.mount('#app');

auth.module.js在store/index.js中导出auth模块。所以是商店。

import AuthService from '../services/auth.service';

const user = JSON.parse(localStorage.getItem('user'));
const initialState = user
  ? { status: { loggedIn: true }, user }
  : { status: { loggedIn: false }, user: null };

export const auth = {
  namespaced: true,
  state: initialState,
  actions: {
    login({ commit }, user) {
      return AuthService.login(user).then(
        user => {
          commit('loginSuccess', user);
          return Promise.resolve(user);
        },
        error => {
          commit('loginFailure');
          return Promise.reject(error);
        }
      );
    },
    logout({ commit }) {
      AuthService.logout();
      commit('logout');
    },
    register({ commit }, user) {
      return AuthService.register(user).then(
        response => {
          commit('registerSuccess');
          return Promise.resolve(response.data);
        },
        error => {
          commit('registerFailure');
          return Promise.reject(error);
        }
      );
    }
  },
  mutations: {
    loginSuccess(state, user) {
      state.status.loggedIn = true;
      state.user = user;
    },
    loginFailure(state) {
      state.status.loggedIn = false;
      state.user = null;
    },
    logout(state) {
      state.status.loggedIn = false;
      state.user = null;
    },
    registerSuccess(state) {
      state.status.loggedIn = false;
    },
    registerFailure(state) {
      state.status.loggedIn = false;
    }
  },
  getters: {
    isAuthenticated(state){
      return state.status.loggedIn;
    }
  }
};

这是完整的项目。我不能发布所有的代码，因为这里太多了。https://github.com/mupml/peoplezone-spring-security-spring-boot-vue.js
正如我所提到的，我的方法可能存在根本性的缺陷。
如果有必要的话，我相信这不是问题所在。我希望不会。mysql数据库。
https://github.com/mupml/person-search-spring-boot-vue-security
我遇到的问题是，它可以很好地阻止受限制的路由，但是当我尝试登录时，它什么也不做。