Tengo un componente Home.js que registra al usuario en la API e inicia sesión y luego obtiene el token recibido del encabezado de autorización de respuesta y lo guarda en la variable de estado 'token'.
Este token se usará en todos los demás componentes para acceder a la API cuando se realicen solicitudes, entonces, ¿cuál es la mejor manera de usar este valor para todos los demás componentes?
Inicio.js:
const SIGNUP_URL = 'http://localhost:8080/users/signup'; const LOGIN_URL = 'http://localhost:8080/login'; class Home extends Component { constructor(props) { super(props); this.state = { isAuthenticated:false, token: '' }; } componentDidMount() { const payload = { "username": "hikaru", "password": "JohnSmith72-" }; fetch(SIGNUP_URL, { method: 'POST', headers: { "Accept": "application/json", "Content-Type": "application/json" }, body: JSON.stringify(payload) }) .then(response => response.json()) .then((data) => { console.log(data); }); fetch(LOGIN_URL, { method: 'POST', headers: { "Accept": "application/json", "Content-Type": "application/json" }, body: JSON.stringify(payload) }) .then(response => this.setState({token: response.headers.get("Authorization"), isAuthenticated:true}) ) }Por ejemplo, el componente userList que obtendrá los datos del usuario de la API, pero requiere el token API almacenado en la variable de estado del token del componente Home para enviar la solicitud correctamente a través del encabezado de autorización.
Gracias por cualquier ayuda
Debería usar AuthContext y localStorage para hacer esto, guarde el token en el estado o localStorage y cree un archivo de configuración que use el mismo token cuando llame a una API que lo hice en axios. Axios tiene un concepto de interceptores que nos permite adjuntar un token a nuestras llamadas a la API. Estoy guardando el token en localStorage después de un inicio de sesión exitoso y luego uso el mismo token de localStorage para agregarlo a cada llamada que necesita un token, si la API no lo necesita. necesito un token (algunas apis pueden ser públicas) puedo usar axios directamente, consulte el siguiente código:
import axios from 'axios'; let apiUrl = ''; let imageUrl = ''; if(process.env.NODE_ENV === 'production'){ apiUrl = `${process.env.REACT_APP_LIVE_URL_basePath}/web/v1/`; }else{ apiUrl = `http://127.0.0.1:8000/web/v1/`; } const config = { baseURL: apiUrl, headers: { 'Content-Type': 'application/json;charset=UTF-8', "Access-Control-Allow-Origin": "https://www.*******.com", 'Access-Control-Allow-Methods': 'GET, POST, PATCH, DELETE', }, }; const authAxios = axios.create(config); authAxios.interceptors.request.use(async function(config) { config.headers.Authorization = localStorage.getItem('access_token') ? `Bearer ${localStorage.getItem('access_token')}` : ``; return config; }); export { apiUrl, axios, authAxios };ahora, al hacer una llamada api, puede hacer algo como lo siguiente:
import { apiUrl, authAxios } from '../config/config' export async function saveAssignment(data) { try { const res = await authAxios.post(apiUrl + 'assignment/save-assignment', data) return res.data; } catch(e){ } }aquí, preste atención, no estoy usando axios para hacer una llamada api, pero estoy usando authAxios para hacer llamadas (que se exporta desde el archivo de configuración) que tendrá un token en el encabezado.
(También puede usar una biblioteca de terceros como Redux, pero el concepto sigue siendo el mismo)
Puede crear una función personalizada llamada authenticated_request por ejemplo. Esta función podría obtener su token de CookieStorage en caso de almacenamiento web o asíncrono en caso de react-native o incluso si lo tiene en alguna biblioteca de administración de estado. No importa Use esta función en lugar de la función de fetch y llame a buscar dentro de ella. Piense en ello como una función de orden superior para sus solicitudes de red.
const authenticated_request(url, config) { fetch(url, { ...config, headers: { ...config.headers, Authorization: getToken() } }); }También puede aprovechar el uso de algo como axios y usar interceptores de solicitudes para interceptar solicitudes y respuestas. Inyectando su token según sea necesario.
Puede colocar el token en una cookie si su aplicación es SSR. Para hacer eso, tienes que crear las siguientes funciones:
export const eraseCookie = (name) => { document.cookie = `${name}=; Max-Age=-99999999;`; }; export const getCookie = (name) => { const pairs = document.cookie.split(';'); const pair = pairs.find((cookie) => cookie.split('=')[0].trim() === name); if (!pair) return ''; return pair.split('=')[1]; }; export const setCookie = (name, value, domain) => { if (domain) { document.cookie = `${name}=${value};path=/`; } else { document.cookie = `${name}=${value}`; } };También puede colocar su token en el almacenamiento local:
Establecer en el almacenamiento local a través de la función integrada:
localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c');Obtenga el token a través de la función incorporada:
const token = localStorage.getItem('token');