I am currently facing an issue where the requireAuth() function is being called repeatedly, causing a loop. I only want to display pages when the user is logged in.
This is the code snippet I am using:
// Routes
const routes = [
{
path: '/',
component: Dashboard,
beforeEnter: (to, from, next) => {
requireAuth(to, from, next);
},
children: [
{
path: '',
name: 'dashboard',
component: DashboardIndex
}, {
path: '*',
name: '404',
component: NotFound
}
]
}, {
path: '/login',
component: Login,
name: 'login',
},
];
function requireAuth (to, from, next) {
if (!localStorage.token) {
console.log('testing');
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
}
// Routing logic
let router = new VueRouter({
routes: routes,
mode: 'hash'
});
The message testing is printed approximately 1000 times before triggering this error:
[vue-router] uncaught error during route navigation: warn @ app.js
app.js RangeError: Maximum call stack size exceeded
How can I ensure that the path /login is redirected to when !localStorage.token condition is met?