CODEWITHSUNDEEP
javascriptvue.jsvue-router
danefondo
danefondo

Reputation: 555

Why am I getting the error Maximum call stack size exceeded in Vue Router?

I've eliminated all the ways of 'next' being called twice to prevent loops. Everything seems to work except what's going on inside the if (authenticated) block. The goal is to keep the user stuck at the RegisterFlow page until they've verified & provided a display name. Where am I going wrong?

Error: Uncaught (in promise) RangeError: Maximum call stack size exceeded

Code:

const authPages = ["LoginPage", "Register", "ForgotPass"];
const publicPages = ["PrivacyPolicy", "Terms"];

router.beforeEach(async (to, from, next) => {
  console.log("name", to.name);
  if (!store.state.auth.ready) {
    try {
      await store.dispatch("auth/authenticate");
    } catch (err) {
      console.log("@router err: ", err);
    }
  }

  const authenticated = store.state.auth.authenticationStatus;
  const verified = store.state.auth.verificationStatus;
  let displayName = null;
  if (store.state.auth.user && store.state.auth.user.displayName) {
    displayName = store.state.auth.user.displayName;
  }

  if (publicPages.includes(to.name) || to.name == "Landing") {
    next();
  } else if (authenticated) {
    if (verified && displayName) {
      if (authPages.includes(to.name) || to.name == "RegisterFlow") {
        next("/");
      } else {
        next();
      }
    } else {
      next({ name: "RegisterFlow" });
    }
  } else if (!authenticated) {
    if (authPages.includes(to.name)) {
      next();
    } else if (to.name == "RegisterFlow") {
      next({ name: "LoginPage" });
    } else {
      next({ name: "LoginPage" });
    }
  }
});

Upvotes: 0

Views: 949

Answers (1)

Joshua Angnoe
Joshua Angnoe

Reputation: 1075

In this block:

    if (verified && displayName) {
      if (authPages.includes(to.name) || to.name == "RegisterFlow") {
        next("/");
      } else {
        next();
      }
    } else {
      next({ name: "RegisterFlow" });
    }

When someone is not (verified && displayName) you will always trigger a next({name: "RegisteFlow"}) even if to.name == RegisterFlow. This causes the infinite loop. Something like:

    if (verified && displayName) {
      if (authPages.includes(to.name) || to.name == "RegisterFlow") {
        next("/");
      } else {
        next();
      }
    } else {
      if (to.name == "RegisterFlow") { 
         next();
      } else { 
         next({ name: "RegisterFlow" });
      }
    }

will probably do the trick.

Upvotes: 2

Related Questions