Функция vue router next () не работает в Promise в router.beforeEach - PullRequest
Новая
       18

Функция vue router next () не работает в Promise в router.beforeEach

4 голосов
/ 27 марта 2019

У меня есть следующий код: 

router.beforeEach((to, from, next) => {
  if (to.name !== from.name) {
    store
      .dispatch("fetchCurrentUser")
      .then(() => {
        console.log('then');
        // do something
        next();
      })
      .catch(() => {
        console.log('catch');
        router.push("/login");
        next();
    });
  } else {
    next();
  }
  // next();
});

Я пытаюсь получить текущего пользователя, и если это удается, то что-то сделать с этими данными, а если запрос не выполнен, то перенаправить пользователя на страницу входа. Но вызовы next () не работают, я получаю «then» или «catch» в консоли, но перенаправление не происходит и начинается бесконечный цикл. Но если я возьму next () из условия (закомментированная строка), перенаправление будет работать нормально.

Ответы [ 3 ]

0 голосов
/ 27 марта 2019

Для перенаправления вы должны использовать next ('/') или next ({path: '/'}).

Из документации:

next: Функция: thisфункция должна быть вызвана для разрешения хука.Действие зависит от аргументов next:

next (): перейти к следующему хуку в конвейере.Если крюков не осталось, навигация подтверждается.

next (false): отменить текущую навигацию.Если URL-адрес браузера был изменен (либо вручную пользователем, либо с помощью кнопки «Назад»), он будет сброшен на URL-адрес маршрута.

next ('/') или next ({path: '/'}): перенаправить в другое место.Текущая навигация будет прервана, а новая будет запущена.Вы можете передать любой объект местоположения следующему, что позволяет указать такие параметры, как replace: true, name: 'home' и любой параметр, используемый в router-link для prop или router.push

0 голосов
/ 20 июня 2019

Мне удалось реализовать асинхронную проверку внутри beforeEach, в моем случае - аутентификацию. 

export async function onBeforeEach(to, from, next) {
  let { someUserToken } = to.query
  if (someUserToken) {
    let nextRoute = await authenticate(to)
    next(nextRoute)
  } else {
    const userToken = store.state.application.userToken
    if (!to.meta.public && !userToken) {
      next({ name: 'Forbidden' })    
    } else {
      next()
    }
  }
}

async function authenticate(to) {
  let { someUserToken, ...rest } = to.query

  return store
    .dispatch('application/authenticate', {
      someUserToken
    })
    .then(() => {
      return {
        name: 'Home',
        query: {
          ...rest
        }
      }
    })
    .catch(() => {
      return { name: 'Forbidden' }
    })
}

Надеюсь, это поможет.

0 голосов
/ 27 марта 2019

promise разрешается после завершения функции.

Это означает, что комментарий next происходит независимо от результата результата обещания.Затем обещание разрешается, и вы звоните другому next.

. Суть в том, что вам не нужно комментировать next, и вы должны просто покрыть разрешение обещания.

...