I've been grappling with this issue for countless hours now. I'm currently using Vue3
My goal is to implement a beforeRouterEnter guard in order to check the user's role upon login and direct them to the appropriate route accordingly.
Once the user successfully logs in from the login page, the userRoleId is saved in the Vuex store, and they are redirected to the homepage. The homepage contains the following script:
beforeRouteEnter(to, from, next) {
next((vm) => {
if (vm.$store.getters.userRoleId == USER) {
next("/us");
return;
}
if (vm.$store.getters.userRoleId == ADMIN) {
next("/ad");
return;
}
if (vm.$store.getters.userRoleId == SUPER_ADMIN) {;
next("/sa");
return;
}
next();
});
},
However, I keep encountering the warning: 'The "next" callback was called more than once in one navigation guard when going from "/" to "/". It should be called exactly one time in each navigation guard. This will fail in production.'
This error occurs when I am NOT logged in and reach the else block (as soon as the next() line is reached), or when I am logged in and within any true if statement, causing the redirect to malfunction.