Как использовать vue-ресурс в навигации

Question

Я пытаюсь использовать vue-resource внутри маршрутизатора, чтобы получить информацию о пользователе по токену для защиты некоторых маршрутов:

router/index.js:

const router = new Router({
  mode: 'history',
  linkExactActiveClass: 'is-active',
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/board',
      name: 'Board',
      component: Board,
      meta: {
        requiresAuth: true
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  // check if rout requires auth
  if (to.matched.some(rec => rec.meta.requiresAuth)) {
    const token = localStorage.getItem('user-token')
    if (token == null) {
      next({ name: 'Login' })
    }
    else {
      this.$http.get('/rest-auth/user/', {headers: {"Authorization": "Token " + token}})
      .then(response => { next() }, response => { next({ name: 'Login' }) });
    }
  }
  else {
    next()
  }
})

Но я 'я получаю сообщение об ошибке, когда я пытаюсь войти в систему: TypeError: Cannot read property 'get' of undefined, поэтому я попытался решить ее следующим образом, чтобы получить доступ к экземпляру vm:

router.beforeEach((to, from, next) => {
  // check if rout requires auth
  if (to.matched.some(rec => rec.meta.requiresAuth)) {
    const token = localStorage.getItem('user-token')
    if (token == null) {
      next({ name: 'Login' })
    }
    else {
      next(vm => {
        vm.$http.get('/rest-auth/user/', {headers: {"Authorization": "Token " + token}})
        .then(response => { next() }, response => { next({ name: 'Login' }) });
      })
    }
  }
  else {
    next()
  }
})

Но это также не работает, так что, возможно,Мне нужно переключиться на axios, чтобы сделать это?

Answer 1

Я уверен, что вам нужно import vue-resource from 'vue-resource'