带有 vue 路由器 beforeEach 和子路径的无限循环

Question

当我将 beforeEach 与子路径一起使用时，调试控制台显示此错误：vue-router.esm.js?8c4f:2079 RangeError: Maximum call stack size exceeded

import Vue from 'vue'
import VueRouter from 'vue-router'
import LoginMixin from '@/mixins/LoginMixin.js'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: require('@/views/Home.vue').default,
  },
  {
    path: '/login',
    name: 'login',
    meta: { layout: 'centered' },
    component: () => import('@/views/Login.vue'),
  },
  {
    path: '/register',
    name: 'register',
    meta: { layout: 'centered' },
    component: () => import('@/views/Register.vue'),
    children: [
      {
        path: 'user',
        component: () => import('@/components/RegisterForm.vue'),
      },
      {
        path: 'company',
        component: () => import('@/components/CompanyForm.vue'),
      }
    ]
  },
]

//creamos la instancia router modo history(urls amigables)
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  if (to.path != '/login' || to.path != '/register/user' && LoginMixin.methods.loginMixinCheckAuth() == false) {
    //if not logead and join to other page distinc of login or register redirect to login
    next('/login')
  }
  else {
    next()
  }
})

我不知道什么是坏的，语法很好，函数 LoginMixin.methods.loginMixinCheckAuth() 运行良好（我在没有函数的情况下测试，结果是一样的）。

Answer 1

嗯，乍一看，我会尝试在您的 beforeEach 方法中简化这个复杂的 if。尝试将requiresAuth: true 之类的内容添加到需要登录用户的所有路由的元数据中。

从某种意义上说，您希望在您的路线中使用这样的东西：

  // ...
  {
    path: '/users/:userId(\\d+)/edit/',
    name: 'EditUser'
    props: true,
    meta: {
        requiresAuth: true, // <-- add this meta flag against which you check later in beforeEach
    },
    component: () => import(/* webpackChunkName: "user-edit" */ '@/views/UserEdit.vue'),
  },
  // ...

这在你的beforeEach:

router.beforeEach((to, from, next) => {
    if (to.matched.some((record) => record.meta.requiresAuth)) { // <-- check for requiresAuth here
        // assuming your login mixin works
        // if I were you I'd store some JWT in localStorage and check that somehow in a vuex getter
        if (!LoginMixin.methods.loginMixinCheckAuth()) {
            next('/login')
        } else {
            next()
        }
    } else {
        next()
    }
})

要完整回答这个问题会有点笨重，所以去看看我是如何使用metahere 并实现了beforeEachrule here