Почему настройка Vue.http для vue-resource игнорируется?

Question

Я использую Vue.js 2.3.3, Vue Resource 1.3.3, Vue Router 2.5.3 и пытаюсь настроить Vue-Auth. Я продолжаю получать ошибку консоли, однако, это говорит auth.js?b7de:487 Error (@websanova/vue-auth): vue-resource.1.x.js : Vue.http must be set., Я устанавливаю Vue.http в main.js, но vue-resource по какой-то причине не поднимает его.

main.js:

import Vue from 'vue'
import Actions from 'actions'
import App from './App'

Vue.use(Actions, {
  locales: ['en', 'zh', 'fr']
})

Vue.http.options.root = 'https://api.example.com'

new Vue({
  render: h => h(App),
  watch: {
    lang: function (val) {
      Vue.config.lang = val
    }
  }
}).$mount('#app')

действия /index.js

import VueResource from 'vue-resource'
import Router from 'actions/router'
import I18n from 'actions/i18n'

export default {
  install (Vue, options) {
    Vue.use(Router)
    Vue.use(I18n, options.locales)
    Vue.use(require('@websanova/vue-auth'), {
      router: require('@websanova/vue-auth/drivers/router/vue-router.2.x'),
      auth: require('@websanova/vue-auth/drivers/auth/bearer'),
      http: require('@websanova/vue-auth/drivers/http/vue-resource.1.x')
    })
  }
}

И если я добавлю Vue.use(VueResource) к action /index.js прямо внизу Vue.use(Router)Я получаю новую ошибку: Error (@websanova/vue-auth): vue-router.2.x.js : Vue.router must be set.

С другой стороны, если я перееду Vue.http.options.root = 'https://api.example.com' прямо под оператором импорта я получаю еще одну ошибку: Uncaught TypeError: Cannot read property 'options' of undefined

Answer 1

Вам нужно импортировать 'vue-resource' в ваш файл main.js, чтобы получить эти ошибки:

import Vue from 'vue'
import VueResource from 'vue-resource';
import Actions from 'actions'
import App from './App'

Vue.use(Actions, {
  locales: ['en', 'zh', 'fr']
})

Vue.use(VueResource)
Vue.http.options.root = 'https://api.example.com'

new Vue({
  render: h => h(App),
  watch: {
    lang: function (val) {
      Vue.config.lang = val
    }
  }
}).$mount('#app')

Answer 2

С помощью axios и не vue-resource это рабочая установка для меня:

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueRouter)
Vue.use(VueAxios, axios)

Vue.router = new VueRouter({
  // Your routes.
})

Vue.use(require('@websanova/vue-auth'), {
    auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
    http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
    router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
})

App.router = Vue.router

new Vue(App).$mount('#app')

Для получения дополнительной информации вы можете обратиться к этому замечательному учебнику: https://codeburst.io/api-authentication-in-laravel-vue-spa-using-jwt-auth-d8251b3632e0