I have the following vue router file, and I want the router to rediret the user to the register page in case he is not logged in. When the user is logged in, it works fine, but when he is not, I get the following error:

InternalError: too much recursion

The console outputs not logged in also which means that the error is caused the next method in the if statement body.

Router index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: 'Dashboard',
  },
  {
    path: '/dashboard',
    name: 'dashboard',
    props: true,
    component: () => import('@/views/dashboard/Dashboard.vue'),
  },
  {
    path: '/Dashboard',
    name: 'Dashboard',
    props: true,
    component: () => import('@/views/dashboard/Dashboard.vue'),
  },

  {
    path: '/ProjectPage/:id',
    name: 'ProjectPage',
    props: true,
    component: () => import('@/views/pages/ProjectPage/ProjectPage.vue')
  },
  {
    path: '/MyIssues',
    name: 'MyIssues',
    props: true,
    component: () => import('@/views/pages/MyIssuesPage/MyIssuesPage.vue')
  },
  {
    path: '/IssuePage/:id',
    name: 'IssuePage',
    props: true,
    component: () => import('@/views/pages/IssuePage/IssuePage.vue')
  },
  {
    path: '/CreateProject',
    name: 'CreateProject',
    component: () => import('@/views/pages/CreateProjectPage/CreateProject.vue')
  },

  {
    path: '/pages/account-settings',
    name: 'pages-account-settings',
    component: () => import('@/views/pages/account-settings/AccountSettings.vue'),
  },
  {
    path: '/pages/login',
    name: 'pages-login',
    component: () => import('@/views/pages/Login.vue'),
    meta: {
      layout: 'blank',
      requireLogin: false,
    },
  },
  {
    path: '/pages/register',
    name: 'pages-register',
    component: () => import('@/views/pages/Register.vue'),
    meta: {
      layout: 'blank',
      requireLogin: false,
    },
  },
  {
    path: '/error-404',
    name: 'error-404',
    component: () => import('@/views/Error.vue'),
    meta: {
      layout: 'blank',
    },
  },
  {
    path: '*',
    redirect: 'error-404',
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})


router.beforeEach((to, from, next) => {
  if (to.matched.some(record => !record.meta.requireLogin) && !store.state.isAuthenticated) {
    console.log('not logged in')
    next({ name: 'pages-register', query: { to: to.path } });
  } else {
    console.log('logged in')
    next()
  }
});

export default router

CodePudding user response：

The pages-register is also guarded.

  {
    path: '/pages/register',
    name: 'pages-register',
    component: () => import('@/views/pages/Register.vue'),
    meta: {
      layout: 'blank',
      requireLogin: false,
    },
  },

You must remove it. Otherwise, You will encounter recursive routing