Envío de la ficha de portador con axios

En mi aplicación de reacción, estoy usando axios para realizar las solicitudes de API REST.

Pero no puede enviar el encabezado de autorización con la solicitud.

Aquí está mi código:

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

Aquí, el validToken()método simplemente devolvería el token del almacenamiento del navegador.

Todas las solicitudes tienen una respuesta de error 500 que dice que

No se pudo analizar el token de la solicitud

desde el back-end.

¿Cómo enviar el encabezado de autorización con cada solicitud? ¿Recomendarías algún otro módulo 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);

El primer parámetro es la URL.
El segundo es el cuerpo JSON que se enviará junto con su solicitud.
El tercer parámetro son los encabezados (entre otras cosas). Que es JSON también.

Esta es una forma única de configurar el token de autorización en axios. Establecer la configuración para cada llamada de axios no es una buena idea y puede cambiar el token de autorización predeterminado de la siguiente manera:

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

Editar , gracias a Jason Norwood-Young.

Algunas API requieren que el portador se escriba como Portador, por lo que puede hacer:

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

Ahora no es necesario establecer la configuración para cada llamada a la API. Ahora el token de autorización está configurado para cada llamada de axios.

El segundo parámetro de axios.postes data(no config). configes el tercer parámetro. Consulte esto para obtener más detalles: https://github.com/mzabriskie/axios#axiosposturl-data-config

Puede crear la configuración una vez y usarla en todas partes.

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

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

Utilizando el interceptor Axios:

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

Si desea algunos datos después de pasar el token en el encabezado, pruebe este código

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

Esto funciona y necesito configurar el token solo una vez en mi app.js:

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

Entonces puedo realizar solicitudes en mis componentes sin volver a configurar el encabezado.

"axios": "^0.19.0",

axiospor sí mismo viene con dos "métodos" útiles interceptorsque no son más que middlewares entre la solicitud y la respuesta. así que si en cada solicitud desea enviar el token. Utilice el interceptor.request.

Hice un paquete que te ayuda:

$ npm i axios-es6-class

Ahora puedes usar axios como clase

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

Me refiero a que la implementación del middlewaredepende de ti, o si prefieres crear tu propio axios-es6-class https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a es el medio publicar de donde vino

Esto es lo que también enfrenté. El token que estás pasando no es correcto.

Simplemente codifique el token y pase, obtendrá la respuesta correcta. Pero si el token no se pasa entre comillas simples '', seguramente fallará. Debe estar en formato 'Autorización': 'Portador YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ', donde después de Portador debe estar presente un espacio, también entre comillas simples.

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

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

IMP: El código anterior funcionará, pero si publica algo como:

'Autorización': 'Portador' + YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ, fallará

o ----- el siguiente código también fallará, espero que entiendas la diferencia básica

var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

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