Бесконечный цикл с маршрутизатором vue beforeEach и дочерними путями - PullRequest
Новая
       27

Бесконечный цикл с маршрутизатором vue beforeEach и дочерними путями

0 голосов
/ 03 ноября 2019

Когда я использую beforeEach с дочерними путями, консоль отладки показывает эту ошибку: vue-router.esm.js? 8c4f: 2079 RangeError: Превышен максимальный размер стека вызовов 

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 () работает хорошо (я тестировал без функции, и результат тот же).

1 Ответ

0 голосов
/ 03 ноября 2019

Хм, на первый взгляд, я бы попытался сделать этот запутанный if в вашем beforeEach методе проще. Попробуйте добавить что-то вроде 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()
    }
})

Чтобы ответить на этот вопрос в полном объеме, было бы довольно громоздко, поэтому пойди и проверь, как я это сделал, используя meta здесь и реализовав beforeEach Правило здесь

...