각각 내부 오류를 유발하기 전의 Vue 라우터: 너무 많은 재귀

각각 내부 오류를 유발하기 전의 Vue 라우터: 너무 많은 재귀

저는 다음과 같은 vue 라우터 파일을 가지고 있으며, 사용자가 로그인하지 않을 경우 라우터가 레지스터 페이지로 재연결하기를 원합니다.사용자가 로그인하면 정상적으로 작동하지만 로그인하지 않으면 다음 오류가 발생합니다.

InternalError: too much recursion

콘솔 출력이 로그인되지 않은 경우에도 오류가 발생합니다. 즉, if 문 본문의 다음 메서드에서 오류가 발생합니다.

라우터 인덱스.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

그pages-register또한 보호됩니다.

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

제거해야 합니다.그렇지 않으면 재귀 라우팅이 발생합니다.

언급URL : https://stackoverflow.com/questions/71999616/vue-router-beforeeach-causing-internalerror-too-much-recursion