¿Es posible, utilizando la API de búsqueda , establecer encabezados predeterminados para cada solicitud?
Lo que quiero hacer es establecer un encabezado de Authorization cada vez que haya un token web json en localStorage . Mi solución actual es establecer los encabezados con esta función:
export default function setHeaders(headers) { if(localStorage.jwt) { return { ...headers, 'Authorization': `Bearer ${localStorage.jwt}` } } else { return headers; } }La configuración de los encabezados en una solicitud de recuperación se vería así:
return fetch('/someurl', { method: 'post', body: JSON.stringify(data), headers: setHeaders({ 'Content-Type': 'application/json' }) })Pero tiene que haber una mejor manera de hacer esto. Actualmente estoy desarrollando una aplicación React/Redux/Express si eso es de alguna ayuda.
Crear un contenedor de fetch podría resolver su problema:
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)); } También obtiene el beneficio adicional de poder cambiar su solicitud de cliente fácilmente para todas las llamadas en su aplicación si decide que prefiere Axios u otro paquete. Y puede hacer otras cosas como verificar si options.body es un objeto y agregar el 'Content-Type: application/json .
Podrías usar Axios en lugar de fetch, con Interceptors
const setAuthorization = (token) => { api.interceptors.request.use((config) => { config.headers.Authorization = 'Bearer ' + token; return config; }); }Donde Api es un objeto axios con una URL base
const api= axios.create({ baseURL: 'http://exemple.com' });Y cuando obtenga su token, solo tiene que llamar a la función setAuthorization.
Fuente: Axios README.md
Andri Möll creó un mixin FetchDefaults.js para fetch que establece los valores predeterminados de fetch:
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) }Distribuido bajo licencia solo AGPL-3.0