Envío de la ficha de portador con axios


118

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?


No creo que sea un axiosproblema en absoluto. verifique su validToken()función, devuelve algo que su servidor no entiende.
xiaofan2406

Verifiqué la función dos veces y también usé la cadena de token aquí en lugar de la función, sigue siendo la misma
rakibtg

Respuestas:


140
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.


4
Perdiste un espacio entre el portador y la ficha, entonces funcionará.
diciembre

La publicación del médico: "key:" value "tiene una cita que debería eliminarse ... Pero solucionarlo hizo que la autenticación funcionara para mi aplicación reaccionar-native.
mediaguru

1
@mediaguru Thx por el comentario. ¡Lo arreglé (supongo)! La cita debe haber sido presentada por alguien que editó la respuesta ...
Doctor

2
Bearerdebería usarse con B mayúscula, ¿no?
Alizadeh118

1
@ Alizadeh118 Sí, de acuerdo con la especificación HTTP. Pero muchas api no insisten en las mayúsculas correctas.
OneHoopyFrood

60

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.


18
Bearerdebe escribirse en mayúscula para algunas API (descubrí de la manera difícil).
Jason Norwood-Young


23

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

¿De dónde se pasa el valor del token en este ejemplo? Para mi aplicación, el token se devolvería a la api en el encabezado o en el cuerpo después de un inicio de sesión exitoso.
Ken

está aquíheaders: {'Authorization': 'Bearer '+token}
M.suleman Khan

Cómo pasar datos si es una solicitud POST
M.suleman Khan

Para aquellos que se preguntan de dónde se puede pasar el valor del token, aquí está la sintaxis es6const instance = (token) => axios.create({ baseURL: `${config.API_URL}`, timeout: 1000, headers :{ 'authorization': 'Bearer ' + token } })
Jeet

18

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

1
¿Es este el estándar de la comunidad para configurar los encabezados con axios?
5ervant

@ 5ervant Lo pasé muy mal usando este enfoque. Fue mucho dolor y no lo recomiendo.
ankush981

@ ankush981 ¿qué tiene de malo este enfoque y cuál recomiendas?
Nenad Kaevik

1
@NenadKaevik Hay un caso de uso particular que estaba tratando de cubrir (intercepción de respuesta): informar al usuario cuando el servidor dice 403 en respuesta. La gente generalmente coloca el paso de verificación del token durante la carga del componente, pero suponga que su token se invalida unos segundos después de que se verificó (por cualquier motivo). Ahora, cuando la persona haga clic en un botón, me gustaría que supiera que se ha cerrado la sesión. Es difícil hacer esto usando interceptores, ya que agregan comportamiento global. Entré en un ciclo de recarga porque el interceptor de solicitudes siempre agregaría el token y el interceptor de respuesta lo redireccionaría
ankush981

@NenadKaevik Entonces, tal vez el flujo fue difícil de lograr o estaba usando el enfoque equivocado, pero desde entonces comencé a odiar los interceptores.
ankush981

9

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

2

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",


No sé por qué, pero de esta manera no funciona en Safari en el dispositivo iOS :(
ZecKa

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


-4

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"
};
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.