RangeError: Maximum call stack size exceeded when trying to log out - vue.js

Question

I'm making a simple app using Vue.js and vue router. I'm getting this error when trying to log out of my app:
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
Here's my router.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();
}
}
Here's my logout function:
logout() {
auth.logout();
this.$router.replace("/");
}
The app is a simple dashboard for showing some stats. I'm using a custom auth using firebase etch. It was working earlier I don't know what i did to breakt it pls help!
Update I get another error when using code suggested in error, not sure what this error is about:
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)

Answer 1

This is because when you logged out, auth.loggedIn() will return false.
So in redirect property of login route, else part execute. And you redirect to login page again, and then redirect execute again and again. and in an infinite loop you are redirecting to login page.
You have to check and not run redirect function if you are redirecting to login page. You can use beforeEnter like other routes:
function checkLogin(to, from, next) {
if (auth.loggedIn()) {
next({
path: "/dashboard",
});
} else {
next();
}
}
and in routes array:
routes: [
...
{
path: "/",
name: "login",
component: Login,
beforeEnter: checkLogin
},
...
]