Vuejs2 vue资源未在请求头中传递令牌

我是Vuejs 2的新手，目前正在使用vue资源从服务器检索数据。但是，我需要同时在请求头中传递一个令牌，以便从服务器检索数据

所以问题是，我无法检索数据，因为令牌没有使用vue资源传递到请求头中

以下是使用vue资源的拦截器（传入令牌）拦截GET请求的方法：

test () {
  this.$http.interceptors.push((request) => {
    var accessToken = window.localStorage.getItem('access_token')
    request.headers.set('x-access-token', accessToken)
    return request
  })
  this.$http.get(staffUrl)
   .then(response => {
     console.log(response)
   }, (response) => {
     console.log(response)
   })
}

vue资源的文档，HTTP:

当我试图获取数据时，最终出现错误403（禁止），在dev工具中检查了请求头之后，我在请求头中也找不到令牌

---

请告诉我哪里出了问题，因为我对这一点非常陌生，所以我感谢任何帮助！谢谢大家!

在组件内部使用$http设置拦截器不起作用，或者至少在我的测试中不起作用。如果在推入

test

方法之后立即检查/log

this.$http.interceptors

，您会注意到没有添加拦截器

但是，如果在实例化Vue之前添加拦截器，则会正确添加拦截器，并且会将头添加到请求中

Vue.http.interceptors.push((request, next) => {
  var accessToken = "xyxyxyx"
  request.headers.set('x-access-token', accessToken)
  next()
})

new Vue({...})

这是我使用的

---

另外请注意，如果您使用的是1.4之前的版本，则应始终调用传递给拦截器的下一个方法。这似乎没有必要。

在组件内部使用$http设置拦截器不起作用，或者至少在我的测试中不起作用。如果在推入

test

方法之后立即检查/log

this.$http.interceptors

，您会注意到没有添加拦截器

但是，如果在实例化Vue之前添加拦截器，则会正确添加拦截器，并且会将头添加到请求中

Vue.http.interceptors.push((request, next) => {
  var accessToken = "xyxyxyx"
  request.headers.set('x-access-token', accessToken)
  next()
})

new Vue({...})

这是我使用的

---

另外请注意，如果您使用的是1.4之前的版本，则应始终调用传递给拦截器的下一个方法。这似乎不是必需的。

请检查此代码

import vueResource from "vue-resource";
import { LocalStorage } from 'quasar'

export default ({
    app,
    router,
    Vue
}) => {
    Vue.use(vueResource);

    const apiHost = "http://192.168.4.205:8091/";

    Vue.http.options.root = apiHost;
    Vue.http.headers.common["content-type"] = "application/json";
    Vue.http.headers.common["Authorization"] = "Bearer " + LocalStorage.get.item("a_t");



    Vue.http.interceptors.push(function(request, next) {
        console.log("interceptors", request);
        next(function(response) {

        });
    });
}

---

请检查一下这个密码

import vueResource from "vue-resource";
import { LocalStorage } from 'quasar'

export default ({
    app,
    router,
    Vue
}) => {
    Vue.use(vueResource);

    const apiHost = "http://192.168.4.205:8091/";

    Vue.http.options.root = apiHost;
    Vue.http.headers.common["content-type"] = "application/json";
    Vue.http.headers.common["Authorization"] = "Bearer " + LocalStorage.get.item("a_t");



    Vue.http.interceptors.push(function(request, next) {
        console.log("interceptors", request);
        next(function(response) {

        });
    });
}

---

你好谢谢你的帮助！读了你的解释后，我终于成功了。我不知道这是否是个好主意，但在实例化Vue之前，我将

Vue.http.interceptors

放在了main.js中，然后它就工作了：-）@Bert next（）函数实际上做什么？我在vue资源文档中找不到关于它的任何信息。@CanolGökel看起来他们可能已经从新版本中删除了它。在此之前，拦截器接受了下一个参数，该参数调用链中的下一个拦截器@卡诺格克尔：看起来这件事发生在今年2月（2018年）。我明白了，这就解释了为什么我去年的代码在没有下一个（）调用的情况下无法工作：）我将在我的项目上更新我的vue资源依赖项，谢谢！你好谢谢你的帮助！读了你的解释后，我终于成功了。我不知道这是否是个好主意，但在实例化Vue之前，我将

Vue.http.interceptors

放在了main.js中，然后它就工作了：-）@Bert next（）函数实际上做什么？我在vue资源文档中找不到关于它的任何信息。@CanolGökel看起来他们可能已经从新版本中删除了它。在此之前，拦截器接受了下一个参数，该参数调用链中的下一个拦截器@卡诺格克尔：看起来这件事发生在今年2月（2018年）。我明白了，这就解释了为什么我去年的代码在没有下一个（）调用的情况下无法工作：）我将在我的项目上更新我的vue资源依赖项，谢谢！