vue-resource 未在请求中传递令牌 headers

Question

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

所以问题是，我无法检索数据，因为令牌没有传递到请求 header，使用 vue-resource。

这里是使用vue-resource的拦截器（传入token）拦截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-resource 的文档，HTTP：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

当我尝试获取数据时，我以错误 403（禁止）结束，并且在开发工具中检查请求 headers 后，我也无法在请求中找到令牌 headers.

请告诉我哪里出错了，因为我对此很陌生，所以非常感谢您的帮助！谢谢！

Answer 1

使用 $http 在组件内部设置拦截器不起作用，或者至少在我的测试中不起作用。如果在 test 方法中推送之后 examine/log this.$http.interceptors，您会注意到没有添加拦截器。

如果你在 之前添加拦截器 你实例化你的 Vue，然而，拦截器被正确添加并且 header 将被添加到请求中。

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

new Vue({...})

这是我使用的 test code。

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

Answer 2

请仔细阅读此代码

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-resource 未在请求中传递令牌 headers

vue-resource not passing token in request headers

vue-resource

vuejs2