首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >RangeError:尝试注销时超过的最大调用堆栈大小

RangeError:尝试注销时超过的最大调用堆栈大小
EN

Stack Overflow用户
提问于 2020-05-27 15:26:18
回答 1查看 775关注 0票数 0

我正在使用Vue.js和vue路由器制作一个简单的应用程序。当我试图注销我的应用程序时,我收到了这个错误:

代码语言:javascript
复制
vue-router.esm.js?8c4f:2827 Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at RegExp.exec (<anonymous>)
    at RegExp.[Symbol.match] (<anonymous>)
    at String.match (<anonymous>)
    at matchRoute (vue-router.esm.js?8c4f:1636)
    at match (vue-router.esm.js?8c4f:1518)
    at redirect (vue-router.esm.js?8c4f:1578)
    at _createRoute (vue-router.esm.js?8c4f:1617)
    at match (vue-router.esm.js?8c4f:1519)
    at redirect (vue-router.esm.js?8c4f:1578)
    at _createRoute (vue-router.esm.js?8c4f:1617)
replace @ vue-router.esm.js?8c4f:2827
logout @ App.vue?234e:64
click @ App.vue?4de4:34
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
3

这是我的router.js:

代码语言:javascript
复制
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Login from "./views/Login.vue";

import auth from "./auth";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/dashboard",
      name: "home",
      component: Home,
      beforeEnter: requireAuth
    },
    {
      path: "/",
      name: "login",
      component: Login,
      redirect: () => {
        if (auth.loggedIn()) return "/dashboard";
        else return "/";
      }
    },
    {
      path: "/users",
      name: "users",
      component: () => import("./views/Users.vue"),
      beforeEnter: requireAuth
    },
    {
      path: "/plans",
      name: "plans",
      component: () => import("./views/Plans.vue"),
      beforeEnter: requireAuth
    },
    {
      path: "/meetups",
      name: "meetups",
      component: () => import("./views/Meetups.vue"),
      beforeEnter: requireAuth
    },
    {
      path: "/notif",
      name: "notifications",
      component: () => import("./views/Notifications.vue"),
      beforeEnter: requireAuth
    },
    {
      path: "/admins",
      name: "admins",
      component: () => import("./views/Admins.vue"),
      beforeEnter: requireAuth
    },
    {
      path: "/about",
      name: "about",
      component: () => import("./views/About.vue"),
      beforeEnter: requireAuth
    }
  ]
});

function requireAuth(to, from, next) {
  if (!auth.loggedIn()) {
    next({
      path: "/login",
      query: { redirect: to.fullPath }
    });
  } else {
    next();
  }
}

这是我的注销功能:

代码语言:javascript
复制
logout() {
      auth.logout();
      this.$router.replace("/");
    }

该应用程序是一个简单的仪表板,用于显示一些统计数据。我用的是火基蚀刻。它以前起作用了,我不知道我做了什么来破坏它,请帮助!Update --当使用错误中建议的代码时,我得到另一个错误,不确定这个错误是关于什么的:

代码语言:javascript
复制
TypeError: Cannot read property 'name' of null
    at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3092cd10-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=template&id=7ba5bd90& (app.js:1116), <anonymous>:30:55)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at new Watcher (vue.runtime.esm.js?2b0e:4468)
    at mountComponent (vue.runtime.esm.js?2b0e:4073)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
    at init (vue.runtime.esm.js?2b0e:3118)
    at createComponent (vue.runtime.esm.js?2b0e:5978)
    at createElm (vue.runtime.esm.js?2b0e:5925)
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-27 15:44:47

这是因为当您注销时,auth.loggedIn()将返回false

因此,在登录路由的redirect属性中,else部件执行。然后重定向到登录页面,然后一次又一次地执行redirect。在无限循环中,您将重定向到登录页面。

如果要重定向到登录页面,则必须检查而不是运行重定向功能。您可以像其他路由一样使用beforeEnter

代码语言:javascript
复制
function checkLogin(to, from, next) {
  if (auth.loggedIn()) {
    next({
      path: "/dashboard",
    });
  } else {
    next();
  }
}

在线路阵列中:

代码语言:javascript
复制
routes: [
    ...
    {
      path: "/",
      name: "login",
      component: Login,
      beforeEnter: checkLogin
    },
    ...
]
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62046821

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档