Quasar \ VueJS 3无限路由循环/

Question

我的 routes.js 文件中有一些路线

path: '/main',
    component: () => import('layouts/MainLayout.vue'),
    beforeEnter: (to, from, next) => {
      console.log(store.authState.auth.role)
      if (Number(store.authState.auth.role) === 4) {
        next({ path: '/main/admin' })
      } else {
        next()
      }

    },
    children: [
      {
        path: '',
        component: () => import('pages/Main.vue'),
        meta: { requiresAuth: true }
      },
      {
        path: 'user',
        component: () => import('pages/User.vue'),
        meta: { requiresAuth: true }
      },
      {
        path: 'admin',
        component: () => import('pages/Admin.vue'),
        meta: { requiresAuth: true }
      }
    ]
  }

我在 index.js 路由器文件中有一些代码：

Router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth) && !store.authState.auth.state) {
      next({ path: '/' })
    } else {
      next()
    }
  })

主要思想是 - 如果用户未登录 - 重定向到 root，如果用户登录并转到 /main 路由，则取决于他的角色路由器必须将他重定向到特定路由。但事实上 - 我得到了角色 === 4 的无限循环（示例） - 我做错了什么？谢谢

Answer 1

您的 beforeEnter 导航守卫应用于整个 /main 路线，并且 /main/admin 嵌套在该路线中。这意味着守卫正在 /main/admin 本身上被调用，因此任何请求该页面（或被重定向到该页面）的管理员用户都将从该页面重定向到它自己。

根据您的描述，您可能只想将导航守卫应用于确切的 /main 路线，而不是整棵树。然后，您可以继续重定向到 next({ path: '/main/user' })，而不是简单地在守卫的末尾接受带有 next() 的当前路径。如果那是你想要的，那么你实际上根本不需要 component ，因为永远不会呈现路线。这是它的样子：

path: '/main',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/Main.vue'), // FIXME: not needed?
        meta: { requiresAuth: true },
        beforeEnter: (to, from, next) => {
          if (Number(store.authState.auth.role) === 4) {
            next({ path: '/main/admin' })
          } else {
            next({ path: '/main/user' })
          }
        },
      },
      {
        path: 'user',
        component: () => import('pages/User.vue'),
        meta: { requiresAuth: true }
      },
      {
        path: 'admin',
        component: () => import('pages/Admin.vue'),
        meta: { requiresAuth: true }
      }
    ]
  }

Quasar \ VueJS 3无限路由循环/

Quasar \ VueJS 3 infinite route looping/

vue.js

vue-router

quasar-framework