CODEWITHSUNDEEP
vue.jshttp-redirectvue-routerelectron-builder
fefe
fefe

Reputation: 9055

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

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?

enter image description here

Upvotes: 1

Views: 127

Answers (1)

Matt U
Matt U

Reputation: 5118

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()
}

Upvotes: 2

Related Questions