redux 为每个fetch()请求设置默认头

vwoqyblh  于 2022-11-12  发布在  其他
关注(0)|答案(5)|浏览(210)

是否可以使用fetch API为每个请求设置默认头?
我想做的是,只要localStorage中有json web令牌,就设置一个Authorization头。我目前的解决方案是使用以下函数设置头:

export default function setHeaders(headers) {
    if(localStorage.jwt) {
        return {
            ...headers,
            'Authorization': `Bearer ${localStorage.jwt}`
        }
    } else {
        return headers;
    }
}

在获取请求中设置标头将如下所示:

return fetch('/someurl', {
        method: 'post',
        body: JSON.stringify(data),
        headers: setHeaders({
            'Content-Type': 'application/json'
        })
    })

但必须有更好的方法来做到这一点。我目前正在开发一个React/Redux/Express应用程序,如果这有任何帮助的话。

67up9zun

67up9zun1#

创建一个fetch Package 器可以解决您的问题:

function updateOptions(options) {
  const update = { ...options };
  if (localStorage.jwt) {
    update.headers = {
      ...update.headers,
      Authorization: `Bearer ${localStorage.jwt}`,
    };
  }
  return update;
}

export default function fetcher(url, options) {
  return fetch(url, updateOptions(options));
}

如果您更喜欢Axios或其他软件包,您还可以为应用程序中的所有调用轻松切换请求客户端。您还可以执行其他操作,如检查options.body是否为对象,并添加'Content-Type: application/json头。

vwkv1x7d

vwkv1x7d2#

您可以使用Axios代替fetch,并使用拦截器

const setAuthorization = (token) => {

  api.interceptors.request.use((config) => {
    config.headers.Authorization = 'Bearer ' + token;
    return config;
  });

}

其中Api是一个带有基本URL的axios对象

const api= axios.create({
  baseURL: 'http://exemple.com'
});

当你得到你的令牌时,你只需要调用函数setAuthorization。

  • 来源:Axios README.md *
ndh0cuux

ndh0cuux3#

Andri Möll为fetch创建了一个FetchDefaults.js mixin来设置提取默认值:

var Url = require("url")
var assign = require("oolong").assign
var merge = require("oolong").merge
var PARSE_QUERY = false
var PROTOCOL_RELATIVE = true // Enable //example.com/models to mimic browsers.

exports = module.exports = function(fetch, rootUrl, defaults) {
  if (typeof rootUrl === "string") rootUrl = parseUrl(rootUrl)
  else defaults = rootUrl, rootUrl = null
  return assign(exports.fetch.bind(null, fetch, rootUrl, defaults), fetch)
}

exports.fetch = function(fetch, rootUrl, defaults, url, opts) {
  if (rootUrl != null) url = rootUrl.resolve(url)
  if (typeof defaults === "function") defaults = defaults(url, opts)
  return fetch(url, opts == null ? defaults : merge({}, defaults, opts))
}

function parseUrl(url) {
  return Url.parse(url, PARSE_QUERY, PROTOCOL_RELATIVE)
}

根据AGPL-3.0-only许可证分发

uwopmtnx

uwopmtnx4#

您可以覆盖默认的获取API:

var originalFetch = window.fetch;
window.fetch = function (input, init) {
    if (!init) {
        init = {};
    }
    if (!init.headers) {
        init.headers = new Headers();
    }

    // init.headers could be: 
    //   `A Headers object, an object literal, 
    //    or an array of two-item arrays to set request’s headers.`
    if (init.headers instanceof Headers) {
        init.headers.append('MyHeader', 'Value');
    } else if (init.headers instanceof Array) {
        init.headers.push(['MyHeader', 'Value']);
    } else {
        // object ?
        init.headers['MyHeader'] = 'Value';
    }
    return originalFetch(input, init);
};

参考文献:

  • https://fetch.spec.whatwg.org/#fetch-method
  • https://fetch.spec.whatwg.org/#requestinit
fquxozlt

fquxozlt5#

一个快速但不推荐的方法是重新定义默认的.fetch()函数:

const oldFetch = window.fetch;
window.fetch = function() {
    arguments[1].headers = { 'blahblah' : 'blabla' };
    return oldFetch.apply(window, arguments);
}

代码未经测试且未完成。如果您决定使用此答案,请检查arguments.length,添加代码以保留现有的头文件,等等。我只是提供进一步探索的方向。

相关问题