'Maximum call stack size exceeded' VueJS routing

Question

Basically the router.beforeEach() method is doing something I don't understand.

I get the jist of the issue being that when my route is re-directing to /login it will do it around 960 times or so until the error occurs.

my code is like so:

Router:

let router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path:'/login',
      name: 'login',
      component: Login,
      meta: {
        requiresAuth: 'false'
      }
    },
    {
      path:'/register',
      name: 'register',
      component: Register,
      meta: {
        requiresAuth: 'false'
      }
    },
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: 'True'
      }
    }
  ]
})

the beforeEach() method

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {

    console.log(to.matched.some(record => record.meta.requiresAuth))
    if (localStorage.getItem('jwt') == null) {
      next({
       path: '/login',
        params: { nextUrl: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    if (localStorage.getItem('jwt') != null) {
      next({
        path: '/',
        params: { nextUrl: '/' }
      })
    } else {
      next()
    }
  }
})

I've looked through countless threads and other places and none have the same issue as me (or I'm overlooking things). Anyone got an idea on how to fix, and what is actually happening to make the error occur in this? from what I can tell I have nothing named twice or any other function/component fire off when it shouldn't.

M1kkelZUUU · Accepted Answer · 2019-04-14 21:50:45Z

2

Fixed it. I'm a bit special in the head. For anyone with the same issue just change the routes to

routes: [
    {
        path: '/login',
        name: 'login',
        component: Login,
        meta: {
          requiresAuth: false
        }
    },
    {
      path:'/register',
      name: 'register',
      component: Register,
      meta: {
        requiresAuth: false
      }
    },
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    }
  ]

answered Apr 14, 2019 at 21:50

M1kkelZUUU

411 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dexter Over a year ago

Could you explain some more what you did? I don't see any changes?

M1kkelZUUU Over a year ago

@dexter, yeah basically the meta data i apply in each route i set the value of requiresAuth as a string instead of a boolean. And JS returns false on ‘true’ == true.

dexter Over a year ago

Ah tnx, now I see it!

Jousi · Accepted Answer · 2020-07-08 18:30:36Z

0

For anyone who gets this error without any obvious mistake, try deleting node_modules and running npm install again. I got this error when switching git branches and the only thing that changes were the packages, so I tried the above and it got rid of the problem :)

answered Jul 8, 2020 at 18:30

Jousi

4765 silver badges28 bronze badges

Collectives™ on Stack Overflow

'Maximum call stack size exceeded' VueJS routing

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related