Question

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

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

这是使用vue-resource的拦截器（传入令牌）来拦截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（禁止），并且在检查开发工具中的请求标头后，我也无法在请求标头中找到该标记。

请告诉我哪里出错了，因为我真的很新，所以我感谢任何帮助！谢谢！

Answer 1

使用$ http在组件内设置拦截器不起作用，或者至少在我的测试中没有。如果您在推入this.$http.interceptors方法后立即检查/记录test，则会注意到未添加拦截器。

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

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不在请求标头中传递令牌

2 个答案: