I'm currently working on implementing a navigation guard in Vue.js with a specific logic: I want to restrict access to all routes that require authentication and redirect users to the login page if they are not authenticated. The only exception is the login route, which should allow users to sign in without getting stuck in a loop (this part is proving challenging for me). Once a user is authenticated, they should be able to access both restricted and non-restricted routes.
In summary, I aim to permit access to non-restricted routes, facilitate signing in, and prevent unauthorized access to restricted routes.
If my logic seems unclear or flawed, please feel free to provide feedback as I have been grappling with this issue for some time and could benefit from another perspective.
Below is the code snippet I am working with:
The code is primarily based on a tutorial from bezkoder.com and insights gained from a Vue course by Maximilian Schwarzmuller on Udemy, where I was introduced to navigation guards for the first time.
main.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) => {
// Navigation guard logic implementation goes here
})
app.use(router);
app.use(store);
app.config.productionTip = false;
app.component('app-nav', TheNav);
app.use(VueParticles);
app.mount('#app');
auth.module.js The auth module is exported in the store/index.js. So it's the store.
import AuthService from '../services/auth.service';
// Auth module implementation details go here
For the complete project, you can find the code repository at the following link: https://github.com/mupml/PeopleZone-Spring-Security-Spring-Boot-Vue.js
As previously mentioned, there may be fundamental flaws in my approach.
I am also using a Spring backend with a MySQL database: https://github.com/mupml/person-search-spring-boot-vue-security
The current issue I am facing is that while the navigation guard effectively blocks access to restricted routes, it fails to function properly when trying to log in.