Jquery 在HTTP侦听器中添加头

jQuery是否有办法拦截所有传出的HTTP请求以添加授权头

我知道这是可以做到的

所以，类似这样的事情（显然我不期望它会这么容易-但它会很酷！）

---

为

ajaxSend

在回调中设置头对我来说很有用

function getToken() {
   return window.localStorage.getItem('token');
}

function setupAuth() {
  $(document).ajaxSend(function (event, jqXhr) {
    var token = getToken();
    jqXhr.setRequestHeader('Authorization', 'Bearer ' + token);
  });
}

下面是一个值得思考的“有趣”解决方案

您可以包装jQueryAjax调用，并在包装器内设置标题。我编写以下包装器也是为了利用承诺。使jQuery“感觉”更像angularJS（至少对于HTTP调用是这样）

[见此处要点](

用法（假设令牌已被持久化）

function getToken() {
   return window.localStorage.getItem('token');
}

function setupAuth() {
  $(document).ajaxSend(function (event, jqXhr) {
    var token = getToken();
    jqXhr.setRequestHeader('Authorization', 'Bearer ' + token);
  });
}

                var Http = (function ($, storage, self) {
                var _contentType = 'application/json; charset=utf-8',
                    _dataType = 'json',
                    _key = 'token';

                function getToken() {
                    return storage.getItem(_key);
                }

                function setAuthHeader(xhr) {
                    var token = getToken();
                    if (!token) return;
                    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
                }

                function get(url) {
                    var method = 'GET';
                    var deferred = $.Deferred();
                    ajax({
                        deferred: deferred,
                        method: method,
                        url: url
                    });
                    return deferred.promise();
                }

                function post(url, payload) {
                    var method = 'POST';
                    var deferred = $.Deferred();
                    var json = JSON.stringify(payload);
                    ajax({
                        deferred: deferred,
                        json: json,
                        method: method,
                        url: url
                    });
                    return deferred.promise();
                }

                function patch(url, payload) {
                    var method = 'PATCH';
                    var deferred = $.Deferred();
                    var json = JSON.stringify(payload);
                    ajax({
                        deferred: deferred,
                        json: json,
                        method: method,
                        url: url
                    });
                    return deferred.promise();
                }

                function put(url, payload) {
                    var method = 'PUT';
                    var deferred = $.Deferred();
                    var json = JSON.stringify(payload);
                    ajax({
                        deferred: deferred,
                        json: json,
                        method: method,
                        url: url
                    });
                    return deferred.promise();
                }

                function del(url) {
                    var method = 'DELETE';
                    var deferred = $.Deferred();
                    ajax({
                        deferred: deferred,
                        method: method,
                        url: url,
                    });
                    return deferred.promise();
                }

                function ajax(cfg) {
                    $.ajax({
                        type: cfg.method,
                        crossDomain: true,
                        url: cfg.url,
                        data: cfg.json,
                        contentType: _contentType,
                        dataType: _dataType,
                        beforeSend: setAuthHeader,
                        success: function (response) {
                            cfg.deferred.resolve(response);
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            cfg.deferred.reject(thrownError);
                        }
                    });
                }

                self.post = post;
                self.patch = patch;
                self.put = put;
                self.get = get;
                self.delete = del;
                return self;
            }(jQuery, window.localStorage, Http || {}));

Http.get('url/to/api')
  .then(res => {//do something with response})
  .catch(err => {// do something with error});