Как узнать источник перенаправления маршрута в Vue.js? - PullRequest
Новая
       16

Как узнать источник перенаправления маршрута в Vue.js?

1 голос
/ 11 июня 2019

У меня установлена ​​навигационная охрана (main.js), которая перенаправляет определенные маршруты, если выполняется условие: 

router.beforeEach((to, from, next) => {
  if (conditionMet)
      next('/another-route');
  else
      next();
})

Теперь, как я могу узнать, какой route был перенаправлен на /another-route?

Объект from в компоненте «Навигация по компонентам», равный /another-route, не указывает на реальный реферер, а указывает на маршрут, который ссылается на маршрут redirected. Звучит запутанно?

Проще говоря, если бы у route A была кнопка, которая при нажатии переходит на route B, а затем route B перенаправляется на route C. Объект from в C содержит данные A вместо B.

Как узнать, какой маршрут был фактически перенаправлен на C? 

  beforeRouteEnter(to, from, next) {
      console.log(from);
      /* */
      next();
  }

Буду признателен за любую помощь.

1 Ответ

2 голосов
/ 11 июня 2019

Вы не можете сделать это таким образом. Но вы можете сделать обходной путь, используя параметры запроса в /another-route, которые указывают на маршрут B. Так что это будет похоже на /another-route?next=%2Froute-b. И после этого вы можете просто использовать this.$router.redirect(this.$route.query.next)

Так я делаю в своей программе, если неавторизованный пользователь получает доступ к некоторым страницам, например, /customer/1. Я использую r для параметров запроса. 

beforeEnter: (to, from, next) => {
  let access_token = Vue.cookie.get('access_token')
  if (access_token == null) {
    // user doesn't have access token, redirect to login
    if (from.name !== 'login') { // prevent append /r if from is login page itself
      next({ name: 'login', query: { r: to.fullPath } })
    }
    next({ name: 'login' })
  } else {
    // user has access token, user can open the page
    next()
  }
},

Ссылка станет /login?r=%2Fcustomer%2F1

А в login.vue 

onSubmit () {
  this.submitting = true
  let { username, password } = this
  this.$api.POST('auth/login', { username, password })
    .then(response => {
      let { id, access_token } = response.data
      this.setCookie(id, access_token)
      this.$router.replace(this.$route.query.r)
    })
    .catch(error => {
      if (error.response && error.response.status === 401) {
        // show error that username or password is invalid
      }
    })
    .finally(() => {
      this.submitting = false
    })
},
...