Quasar \ VueJS 3 infinite route looping/ - vue.js

Question

I got some routes in my routes.js file
path: '/main',
component: () => import('layouts/MainLayout.vue'),
beforeEnter: (to, from, next) => {
console.log(store.authState.auth.role)
if (Number(store.authState.auth.role) === 4) {
next({ path: '/main/admin' })
} else {
next()
}
},
children: [
{
path: '',
component: () => import('pages/Main.vue'),
meta: { requiresAuth: true }
},
{
path: 'user',
component: () => import('pages/User.vue'),
meta: { requiresAuth: true }
},
{
path: 'admin',
component: () => import('pages/Admin.vue'),
meta: { requiresAuth: true }
}
]
}
and i have some code in index.js router file:
Router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth) && !store.authState.auth.state) {
next({ path: '/' })
} else {
next()
}
})
The main idea was - if user not login - redirect to root, if user login and go to /main route, depends on his role router must redirect him to specific route.
But in fact - i got infinite loop for role === 4 (example) - what i do wrong? Thank you

Answer 1

Your beforeEnter navigation guard is being applied to the entire /main route, and /main/admin is nested within that route. That means that the guard is being called on /main/admin itself, so any admin user who requests that page (or is redirected to it) will be redirected from that page to itself.
Based on your description, you probably want to apply your navigation guard to just the exact /main route and not its entire tree. You could then go on to redirect to next({ path: '/main/user' }) instead of simply accepting the current path with next() at the end of the guard. If that's what you want, then you don't actually need a component there at all, since the route will never be rendered. Here's how that would look:
path: '/main',
component: () => import('layouts/MainLayout.vue'),
children: [
{
path: '',
component: () => import('pages/Main.vue'), // FIXME: not needed?
meta: { requiresAuth: true },
beforeEnter: (to, from, next) => {
if (Number(store.authState.auth.role) === 4) {
next({ path: '/main/admin' })
} else {
next({ path: '/main/user' })
}
},
},
{
path: 'user',
component: () => import('pages/User.vue'),
meta: { requiresAuth: true }
},
{
path: 'admin',
component: () => import('pages/Admin.vue'),
meta: { requiresAuth: true }
}
]
}