Vue.js 拦截器答案

【问题标题】：Vue.js interceptorVue.js 拦截器
【发布时间】：2016-09-10 17:14:12
【问题描述】：

如何在vue.js 中使用interceptor？因此，在每个请求/响应之前，它应该首先进入拦截器。我已经搜索了很多，但找不到一个好的文档。

我想像这样使用 JWTAuth：

(function (define) {
  'use strict'

  define(function (require) {

    var interceptor

    interceptor = require('rest/interceptor')

    /**
     * Authenticates the request using JWT Authentication
     *
     * @param {Client} [client] client to wrap
     * @param {Object} config
     *
     * @returns {Client}
     */
    return interceptor({
      request: function (request, config) {
        var token, headers

        token = localStorage.getItem('jwt-token')
        headers = request.headers || (request.headers = {})

        if (token !== null && token !== 'undefined') {
          headers.Authorization = token
        }

        return request
      },
      response: function (response) {
        if (response.status && response.status.code === 401) {
          localStorage.removeItem('jwt-token')
        }
        if (response.headers && response.headers.Authorization) {
          localStorage.setItem('jwt-token', response.headers.Authorization)
        }
        if (response.entity && response.entity.token && response.entity.token.length > 10) {
          localStorage.setItem('jwt-token', 'Bearer ' + response.entity.token)
        }
        return response
      }
    })

  })

}(
  typeof define === 'function' && define.amd ? define : function (factory) { module.exports = factory(require) }
  // Boilerplate for AMD and Node
))

但我不知道如何在每次请求/响应之前进行拦截。（我使用 Laravel 5.2）。

【问题讨论】：

你考虑过使用 vue-resource 吗？

标签： javascript laravel-5.2 vue.js laravel-elixir

【解决方案1】：

全局配置示例：

Vue.http.interceptors.push({

  request: function (request){
    request.headers['Authorization'] = auth.getAuthHeader()
    return request
  },

  response: function (response) {
    //console.log('status: ' + response.data)
    return response;
  }

});

request 用于传出流量，response 用于传入消息

vue 组件中的本地配置也是可以的。

编辑 - 由于 sytax 现在已更改，它应该如下所示：

Vue.http.interceptors.push((request, next)  => {
  request.headers['Authorization'] = auth.getAuthHeader()
  next((response) => {
    if(response.status == 401 ) {
      auth.logout();
      router.go('/login?unauthorized=1');
    }
  });
});

【讨论】：

值得注意的是，这个答案有点过时，语法现在略有不同。正如 Linus 在他的回答中指出的那样，请查看文档：github.com/pagekit/vue-resource/blob/master/docs/…
如果我将vue.http.intercepters 添加到多个文件中会怎样？然后代码在 http 调用之前进入每个文件？

【解决方案2】：

Vue 本身没有 AJAX 功能。您是在谈论插件 vue-resource，还是使用其他库进行请求？

vue-resource 支持有拦截器：https://github.com/vuejs/vue-resource/blob/master/docs/http.md（向下滚动到最后一部分）

【讨论】：

您可以使用链接到部分 (github.com/vuejs/vue-resource/blob/master/docs/…) 而不是滚动