Invio del gettone al portatore con axios

Nella mia app React sto usando axios per eseguire le richieste API REST.

Ma non è in grado di inviare l' intestazione di autorizzazione con la richiesta.

Ecco il mio codice:

tokenPayload() {
  let config = {
    headers: {
      'Authorization': 'Bearer ' + validToken()
    }
  }
  Axios.post( 
      'http://localhost:8000/api/v1/get_token_payloads',
      config
    )
    .then( ( response ) => {
      console.log( response )
    } )
    .catch()
}

Qui il validToken()metodo restituirebbe semplicemente il token dalla memoria del browser.

Tutte le richieste hanno una risposta di errore 500 che lo dice

Il token non può essere analizzato dalla richiesta

dal back-end.

Come inviare l'intestazione dell'autorizzazione con ciascuna richiesta? Consiglieresti un altro modulo con React?

const config = {
    headers: { Authorization: `Bearer ${token}` }
};

const bodyParameters = {
   key: "value"
};

Axios.post( 
  'http://localhost:8000/api/v1/get_token_payloads',
  bodyParameters,
  config
).then(console.log).catch(console.log);

Il primo parametro è l'URL.
Il secondo è il corpo JSON che verrà inviato insieme alla tua richiesta.
Il terzo parametro sono le intestazioni (tra le altre cose). Che è anche JSON.

Ecco un modo unico per impostare il token di autorizzazione in axios. L'impostazione della configurazione per ogni chiamata axios non è una buona idea e puoi modificare il token di autorizzazione predefinito:

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:1010/'
axios.defaults.headers.common = {'Authorization': `bearer ${token}`}
export default axios;

Modifica , grazie a Jason Norwood-Young.

Alcune API richiedono che il portatore sia scritto come Portatore, quindi puoi fare:

axios.defaults.headers.common = {'Authorization': `Bearer ${token}`}

Ora non è necessario impostare la configurazione per ogni chiamata API. Ora il token di autorizzazione è impostato su ogni chiamata axios.

Il secondo parametro di axios.postè data(non config). configè il terzo parametro. Si prega di consultare questo per i dettagli: https://github.com/mzabriskie/axios#axiosposturl-data-config

Puoi creare la configurazione una volta e usarla ovunque.

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'Authorization': 'Bearer '+token}
});

instance.get('/path')
.then(response => {
    return response.data;
})

Utilizzando Axios Interceptor:

const service = axios.create({
  timeout: 20000 // request timeout
});

// request interceptor

service.interceptors.request.use(
  config => {
    // Do something before request is sent

    config.headers["Authorization"] = "bearer " + getToken();
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

Se vuoi alcuni dati dopo aver passato il token nell'intestazione, prova questo codice

const api = 'your api'; 
const token = JSON.parse(sessionStorage.getItem('data'));
const token = user.data.id; /*take only token and save in token variable*/
axios.get(api , { headers: {"Authorization" : `Bearer ${token}`} })
.then(res => {
console.log(res.data);
.catch((error) => {
  console.log(error)
});

Funziona e devo impostare il token solo una volta nel mio app.js:

axios.defaults.headers.common = {
    'Authorization': 'Bearer ' + token
};

Quindi posso effettuare richieste nei miei componenti senza impostare nuovamente l'intestazione.

"axios": "^0.19.0",

axiosdi per sé viene fornito con due utili "metodi" interceptorsche non sono altro che middleware tra la richiesta e la risposta. quindi se ad ogni richiesta vuoi inviare il token. Usa il interceptor.request.

Ho fatto un pacchetto che ti aiuta:

$ npm i axios-es6-class

Ora puoi usare axios come classe

export class UserApi extends Api {
    constructor (config) {
        super(config);

        // this middleware is been called right before the http request is made.
        this.interceptors.request.use(param => {
            return {
                ...param,
                defaults: {
                    headers: {
                        ...param.headers,
                        "Authorization": `Bearer ${this.getToken()}`
                    },
                }
            }
        });

      this.login = this.login.bind(this);
      this.getSome = this.getSome.bind(this);
   }

   login (credentials) {
      return this.post("/end-point", {...credentials})
      .then(response => this.setToken(response.data))
      .catch(this.error);
   }


   getSome () {
      return this.get("/end-point")
      .then(this.success)
      .catch(this.error);
   }
}

Voglio dire che l'implementazione del middlewaredipende da te, o se preferisci creare il tuo axios-es6-class https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a è il mezzo post da dove proviene

Questo è quello che ho anche affrontato. Il token che stai passando non è corretto.

Basta hardcodificare il token e passare, otterrai la risposta corretta. Ma se il token non viene passato tra virgolette singole '', allora sicuramente fallirà. Deve essere in formato "Autorizzazione": "Bearer YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ", dove dopo Bearer deve essere presente uno spazio, anch'esso molto importante all'interno di virgolette singole.

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

var headers = {
  Authorization: "Bearer " + token,
  Accept: "application/json, text/plain, */*",
  "Content-Type": "application/json"
};

IMP: il codice sopra funzionerà ma se pubblichi qualcosa come:

"Autorizzazione": "Portatore" + YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ, non funzionerà

o ----- anche il codice seguente fallirà, spero che tu capisca la differenza di base

var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

var headers = {
  Authorization: "Bearer " + token,
  Accept: "application/json, text/plain, */*",
  "Content-Type": "application/json"
};