web-dev-qa-db-fra.com

Définit l'en-tête par défaut pour chaque demande fetch ()

Est-il possible, en utilisant fetch API , de définir des en-têtes par défaut pour chaque requête?
Ce que je veux faire, c'est définir un en-tête Authorization chaque fois qu'il y a un jeton web json dans le localStorage. Ma solution actuelle consiste à définir les en-têtes avec cette fonction:

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

La définition des en-têtes dans une demande de récupération ressemblerait alors à ceci:

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

Mais il doit y avoir une meilleure façon de procéder. Je développe actuellement une application React/Redux/Express si cela peut vous être utile.

reactjsexpressreduxauthorizationfetch-api
17
eRodY

Quelqu'un crée un mixage d'extraction pour que la valeur par défaut soit extraite.

https://github.com/moll/js-fetch-defaults

5
Nantaphop

Vous pouvez utiliser Axios au lieu de chercher, avec des intercepteurs

const setAuthorization = (token) => {

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

}

Où Api est un objet axios avec une URL de base

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

Et lorsque vous obtenez votre jeton, vous n'avez qu'à appeler la fonction setAuthorization.

Source: Axios README.md

5
Hugo Chevalier

La création d'un wrapper fetch pourrait résoudre votre problème:

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

Vous avez également l'avantage supplémentaire de pouvoir changer facilement de client de demande pour tous les appels de votre application si vous décidez que vous préférez Axios ou un autre package. Et vous pouvez faire d'autres choses comme vérifier si options.body est un objet et ajoutez le 'Content-Type: application/json entête.

0
underblob