Realizo aplicaciones web con React, Express, MongoDB.
Y quiero pasar el token jwt con encabezado.
Pero, lo paso, sale error 401 (No autorizado).
En acciones de inicio de sesión.js:
export function login(username, password) { return function(dispatch) { axios .post(`${API_URL}/auth/login`, { username, password }) .then(res => { dispatch(loginSuccess(res.data, username)); const token = res.data.token; axios.defaults.headers.common["Authorization"] = token; history.push("/"); }) .catch(err => { if (err.response.status === 401) { dispatch(loginFailure(err)); } }); }; }Y, en mi post.js en el servidor:
getToken = function(headers) { if (headers && headers.authorization) { var parted = headers.authorization.split(" "); if (parted.length === 2) { return parted[1]; } else { return null; } } else { return null; } }; ... // Save Post router.post("/", passport.authenticate("jwt", { session: false }), function( req, res, next ) { var token = getToken(req.headers); if (token) { Post.create(req.body, function(err, post) { if (err) return next(err); res.json(post); }); } else { return res.status(403).send({ success: false, msg: "Unauthorized." }); } });¿Cómo lo arreglo? + Iniciar sesión es un éxito
En primer lugar, cuando inicia sesión y envía el nombre de usuario y la contraseña al backend, en respuesta obtiene token_id. ahora intente almacenar tokens en session_storage y redirigir a la página de su deseo. ahora tomas token_id en tu página de deseos y almacenas una variable como...
let user = JSON.parse(sessionStorage.getItem('data')); const token = user.data.id;ahora tiene token y pasa el encabezado y obtiene datos en respuesta
const api = `your api here` axios.get(api, { headers: {"Authorization" : `Bearer ${token}`} }) .then(res => { console.log(res.data); this.setState({ items: res.data, /*set response data in items array*/ isLoaded : true, redirectToReferrer: false })nota: debe establecer una matriz de elementos en blanco en setState inicial como similar
this.state={ items:[], isLoaded: false, redirectToReferrer:false, token:'' }Incluya su token como clave de autorización como se muestra a continuación.
axios.post(url,data, { headers: { 'authorization': your_token, 'Accept' : 'application/json', 'Content-Type': 'application/json' } }) .then(response => { // return response; }) .catch((error) => { //return error; });cómo-pasar-header-jwt-token-with-axios-react ???
Este es un ejemplo para crear una instancia de axios con URL base de API y JWT_TOKEN globalmente y acceder a ella para diferentes llamadas de API
paso 1: crea una instancia estática para axios
static axiosInstance = axios.create({ baseURL: "BASE_API_URL", timeout: 5000, headers: { 'Authorization': "JWT_TOKEN", 'Content-Type': 'application/json' } });este es el segundo acceso setep axiosInstance ya creado y utilícelo con llamadas API REST dinámicas
paso 2: acceda a la instancia estática y vincule API_URL a la URL base
export const x = (data) => dispatch => { axiosInstance.post('API_URL', { PLAYLOAD }) .then(function (response) { }) .catch(function (error) { }); }API URL = BASE_API_URL + API_URL y JWT_TOKEN único para todos y esto es muy limpio, claro y funcional.