为什么我收到错误 Vue Router 中超出了最大调用堆栈大小？答案

【问题标题】：Why am I getting the error Maximum call stack size exceeded in Vue Router?为什么我收到错误 Vue Router 中超出了最大调用堆栈大小？
【发布时间】：2021-04-12 14:13:46
【问题描述】：

我已经消除了两次调用“下一步”以防止循环的所有方式。除了if (authenticated) 块内发生的事情外，一切似乎都正常工作。目标是让用户停留在 RegisterFlow 页面，直到他们验证并提供了显示名称。我哪里错了？

错误：Uncaught (in promise) RangeError: Maximum call stack size exceeded

代码：

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" });
    }
  }
});

【问题讨论】：

标签： javascript vue.js vue-router

【解决方案1】：

在这个区块中：

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

当某人不是（已验证 && displayName）时，即使 to.name == RegisterFlow，您也将始终触发 next({name: "RegisteFlow"})。这会导致无限循环。比如：

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

可能会成功。

【讨论】：