vue.js - 用于 auth header 的 vue-resource 拦截器

Question

我正在尝试设置一个 Vuejs 前端应用程序(vue-cli webpack 模板)以位于我的 Laravel API 之上。

通过提供正确的授权 token ，我能够使用 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
      });
    },

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

根据 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 本身中指定 header 时，我得到了一个成功的响应，但是当我通过 interceptor 传递它们时，我得到了 401 Unauthorized 来自服务器。如何解决此问题以在使用拦截器时成功响应？

编辑:当我使用开发工具查看传出请求时，我看到以下行为:

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

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

Answer 1

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

应该是这样的:

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()
})