RangeError: превышен максимальный размер стека вызовов при попытке выхода - PullRequest
Новая
       3

RangeError: превышен максимальный размер стека вызовов при попытке выхода

0 голосов
/ 27 мая 2020

Я делаю простое приложение, используя маршрутизаторы Vue. js и vue. Я получаю эту ошибку при попытке выйти из своего приложения: 

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

Вот мой маршрутизатор. js: 

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

Вот моя функция выхода: 

logout() {
      auth.logout();
      this.$router.replace("/");
    }

Приложение представляет собой простую панель инструментов для отображения некоторой статистики. Я использую настраиваемую аутентификацию с помощью firebase etch. Он работал раньше, я не знаю, что я сделал, чтобы его сломать, пожалуйста, помогите! Обновление Я получаю еще одну ошибку при использовании кода, предложенного по ошибке, не знаю, о чем эта ошибка: 

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)

1 Ответ

0 голосов
/ 27 мая 2020

Это связано с тем, что при выходе из системы auth.loggedIn() вернет false.

Таким образом, в свойстве redirect маршрута входа в систему выполняется часть else. И вы снова перенаправляете на страницу входа в систему, а затем снова и снова выполняете redirect. и в бесконечном l oop вы перенаправляетесь на страницу входа.

Вы должны проверять и не запускать функцию перенаправления, если вы перенаправляете на страницу входа. Вы можете использовать beforeEnter, как и другие маршруты: 

function checkLogin(to, from, next) {
  if (auth.loggedIn()) {
    next({
      path: "/dashboard",
    });
  } else {
    next();
  }
}

и в массиве маршрутов: 

routes: [
    ...
    {
      path: "/",
      name: "login",
      component: Login,
      beforeEnter: checkLogin
    },
    ...
]
...