Why does my Vue Router throw a Maximum call stack error?

Question

I have a really simple routing practically looks like this I'm using this under electron

 import Vue from "vue";
import VueRouter from "vue-router";
import Projects from "../views/Projects.vue";
import RegisterUser from "@/views/RegisterUser.vue";
//import { appHasOwner } from "@/services/";
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "projects",
    component: Projects,
    meta: {
      requiresUser: true
    }
  },
  {
    path: "/register",
    name: "register",
    component: RegisterUser
  },
  {
    path: "/settings",
    name: "settings",
    meta: {
      requiresUser: true
    },
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Settings.vue")
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(route => route.meta.requiresUser === true)) {
    //this will be for test case undefined
    let user;
    if (typeof user === "undefined") {
      // eslint-disable-next-line no-console
      console.log(user); //logs undefined but at the end no redirect
      next("/register");
    } else {
      next();
    }
  }
});

export default router;

taking the example from the docs

// GOOD
router.beforeEach((to, from, next) => {
  if (!isAuthenticated) next('/login')
  else next()
})

the application can boot only if there is a user attached in database either should redirect to the register component but the code above will end with Maximum call stack size exceeded. So how to check with beforeEach conditions end redirect to a given page?

Matt U · Accepted Answer · 2019-12-11 18:15:52Z

2

The Maximum call stack size exceeded is usually due to infinite recursion, and that certainly seems to be the case here. In router.beforeEach you're calling next to go to the /register route, which goes back into this method, which calls next, and so on. I see you have a requiresUser in your meta, so you need to check that in beforeEach, like this:

router.beforeEach((to, from, next) => {
  // If the route's meta.requiresUser is true, make sure we have a user, otherwise redirect to /register
  if (to.matched.some(route => route.meta.requiresUser === true)) {
    if (typeof user == "undefined") {
      next({ path: '/register' })
    } else {
      next()
    }
  }
  // Route doesn't require a user, so go ahead
  next()
}

answered Dec 11, 2019 at 18:15

Matt U

5,13812 silver badges28 bronze badges

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

2 Comments

fefe Over a year ago

Thanks for feedback, I updated my codes to reflect your suggested

Matt U Over a year ago

@fefe you also need to include next() at the end of the beforeEach. Right now you're only calling next() inside the first if block

Collectives™ on Stack Overflow

Why does my Vue Router throw a Maximum call stack error?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related