I have set up my router configuration as follows:
const router = new Router({
mode: 'history',
routes: [
// root
{
path: '/',
component: ComponentPage,
redirect: routePrefix.public,
children: [
// public
{
path: routePrefix.public,
component: ComponentPage,
redirect: `${routePrefix.public}/login`,
children: [
{
path: `${routePrefix.public}/login`, component: LoginPage,
}],
},
// private
{
path: routePrefix.private,
component: ComponentPage,
children: [
{
path: `${routePrefix.private}/u`, component: PrivatePage,
}],
}],
}],
});
In my setup, there are two main parts - a public section and a private section. In addition to this, I have configured a navigation guard for authorization:
router.beforeEach((to, from, next) => {
console.log(`registered request to redirect from
'${from.fullPath}' to '${to.fullPath}'`);
if (to.fullPath.startsWith(routePrefix.private) &&
!Store.getters['auth/isAuthenticated']) {
console.log('-> reroute to public main');
next(routePrefix.public);
} else if (to.fullPath.startsWith(routePrefix.public) &&
Store.getters['auth/isAuthenticated']) {
console.log('-> reroute to private main');
next(routePrefix.private);
} else {
next();
}
});
If you're curious about the route prefixes used, here they are:
const routePrefix = {
public: '/p', private: '/x',
};
Nothing incredibly unique.
The Issue
When I access the page localhost:8080/, it correctly redirects from / to /p/login. After successfully logging in, I execute Router.push('/') with the intention of triggering another redirection for the user.
The expected behavior is for / to redirect back to /p/login; then, the navigation guard should step in and direct it to /x/... However, this does not happen. The page remains on /.
Shouldn't it automatically redirect away from the home page? How can I address this issue?