vue-resource 身份验证拦截器 headers

Question

我正在尝试设置一个 Vuejs 前端应用程序（vue-cli webpack 模板）以位于我的 Laravel API.

之上

通过提供正确的身份验证令牌，我能够使用 vue-resource 从 API 获得成功的响应，例如：

methods: {
    getUser () {
      this.$http.get('http://localhost:8000/api/user', 
      {
        headers: {
          'Authorization': 'Bearer eyJ0e.....etc',
          'Accept': 'application/json'
        }
      }).then((response) => {
        this.name = response.data.name
      });
    },

但是，我现在正在尝试设置拦截器，以便为每个请求自动添加用户的身份验证令牌。

根据 vue-resource 自述文件，我正在 main.js 中尝试这样做：

Vue.use(VueResource)

Vue.http.interceptors.push((request, next) => {
  request.headers['Authorization'] = 'Bearer eyJ0e.....etc'
  request.headers['Accept'] = 'application/json'
  next()
})

然后回到我的组件中，我现在只有：

this.$http.get('http://localhost:8000/api/user').then((response) => {
    this.name = response.data.name
});

问题：

当我在 get 本身中指定 headers 时，我得到了一个成功的响应，但是当我通过 interceptor 传递它们时，我得到了一个 401 Unauthorized 来自服务器。如何解决此问题以在使用拦截器时成功响应？

编辑： 当我使用 dev-tools 查看传出请求时，我看到以下行为：

通过向 $http.get 提供 header 来发出请求时，我发出了一个成功的 OPTIONS 请求，然后是一个成功的 GET 请求 Authentication header 被提供给 GET 请求。

但是，当我直接从 $http.get 中删除 headers 并将它们移动到拦截器时，我只发出了一个 GET 请求，而 GET 确实不包含 Authentication header，因此返回为 401 Unauthorized.

Answer 1

原来我的问题是我在拦截器中设置 headers 的语法。

应该是这样的：

Vue.use(VueResource)

Vue.http.interceptors.push((request, next) => {
  request.headers.set('Authorization', 'Bearer eyJ0e.....etc')
  request.headers.set('Accept', 'application/json')
  next()
})

当我这样做的时候：

Vue.use(VueResource)

Vue.http.interceptors.push((request, next) => {
  request.headers['Authorization'] = 'Bearer eyJ0e.....etc'
  request.headers['Accept'] = 'application/json'
  next()
})

Answer 2

添加这个选项：

Vue.http.options.credentials = true;

并使用全局方式的拦截器：

Vue.http.interceptors.push(function(request, next) {

request.headers['Authorization'] = 'Basic abc' //Base64
request.headers['Accept'] = 'application/json'
next()

});

vue-resource 身份验证拦截器 headers

vue-resource interceptor for auth headers

vue.js

vue-resource