routes issue

[anasaw]

what is the wrong with this

i want to check if the user want to go to landing page let him go
else if the admin want to go to admin panel must go to login
else if the admin logged in he can go to any where

every thing is okay but when the user go to landing page he get a white page no content

router.beforeEach((to,from,next) => {
  let loggedIn =LocalStorage.getItem('loggedIn')

  if(to.path == '/'){
    next('/')

  }else if(!loggedIn && to.path !== '/auth'){
    next('/auth')

  }else if (loggedIn && to.path =='/auth'){
    next('/admin')

  }else{
    next()

  }

})

const routes = [
  {
    path: '/',
    component: () => import('layouts/Layout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      { path: '/auth', component: () => import('pages/PageAuth.vue') }
    ]
  },
  {
    path: '/admin',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/admin/Index.vue') }
    ]
  },
  // Always leave this as last one,
  // but you can also remove it
  {
    path: '*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes

vue-router.esm.js?85f8:2128 RangeError: Maximum call stack size exceeded
    at parsePath (vue-router.esm.js?85f8:469)
    at normalizeLocation (vue-router.esm.js?85f8:999)
    at Object.match (vue-router.esm.js?85f8:1493)
    at VueRouter.match (vue-router.esm.js?85f8:2741)
    at HTML5History.transitionTo (vue-router.esm.js?85f8:2082)
    at HTML5History.push (vue-router.esm.js?85f8:2414)
    at eval (vue-router.esm.js?85f8:2184)
    at eval (router-auth.js?8dc1:10)
    at iterator (vue-router.esm.js?85f8:2169)
    at step (vue-router.esm.js?85f8:1895)

and is this a secure way ?

[Hawkeye64]

You don’t need this:

  if(to.path == '/'){
    next('/')

I suspect that is causing your recursion issue