[Vuejs]-Vue-router authentication error "Maximum call stack size exceeded"

by

0👍

I think that the problem is your beforeEach guard:

Router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (store.getters['auth/isLoggedIn']) {
      next({ name: 'Dashboard' })
      return
    }
    next('/login')
  } else {
    next()
  }
})

Your app enters into an infinite loop because of the redirection to route named ‘Dashboard’. When it’s entering Dashboard, beforeEach is called and redirect to ‘Dashboard’. Then it call beforeEach and so on over and over again until it raises the exception

0👍

This kind of rules in the guards are typically to prevent unauthorized users to access some routes, and you have that. The problem is, just like Andrea commented, that you are always redirecting to the same page, and when you reach that page the beforeEach will run again, creating the loop.

Typically, when a user is authorized you simple execute next() to let the user move forward, otherwise you send him/her to wherever you want, like "/login".

What I will recommend you is that instead of using a guard to send your user to a certain initial page you use Dashboard as your default route using the route redirect property:

{ path: '/app', redirect: '/dashboard' }

Leave a comment