Soy nuevo en esto y pasé todo mi tiempo tratando de descubrir cómo crear una forma de generar tokens jwt, dado el entendimiento de que los necesita para el estado de "inicio de sesión" del usuario.
Usé fastapi, y cuando inicio sesión/me registro con mi aplicación, ahora obtengo un token y un 'portador':
{access_token: 'super long string', token_type: 'bearer'}¿Cómo uso esto para mostrar otra vista/página/componente? cual es el proceso ¿Hay algún tipo de decodificador? todos los videos/tutoriales que veo están enfocados en cómo obtenerlo usando node u otros medios, pero ya lo tengo...
Deberá pasar este token en sus encabezados para acceder a la API. Considere el siguiente ejemplo de Axios js:
var axios = require('axios'); var config = { method: 'get', url: `http://${<your_api_url>}/v1/users/`, headers: { 'Authorization': `${<token_type>} ${<access_token>}` } }; axios(config) .then(function (response) { console.log(JSON.stringify(response.data)); }) .catch(function (error) { console.log(error); });Esto es lo que hice:
const [jwtholder, setJwtHolder] = useState('non-bearer') const [jwttoken, setJwtToken] = useState(''); const mainprops = { // session, jwtholder, setJwtHolder, jwttoken, setJwtToken, visitorType, setVisitorType }; else if (jwtholder=='bearer' && visitorType =='buyside') { return( <div> <Buyside {...mainprops}/> </div> )} else if (jwtholder=='bearer' && visitorType =='sellside') { return( <div> <Sellside {...mainprops}/> </div> )} }; onSubmit={ (values, {setSubmitting, resetForm} ) => { setTimeout(() => { _handleLogin({mainprops, values}); resetForm(); setSubmitting(false); }, 1000) }} export default async function _handleSubmit(mainprops,creds) { if (creds.api == 'register'){ var publish_api = 'http://localhost:8007/register/'; //fastapi } else if (creds.api =='login') {publish_api = 'http://localhost:8007/login/';}//fastapi const requestOptions = { method: 'POST', // *GET, POST, PUT, DELETE, etc. mode: 'cors', // no-cors, *cors, same-origin cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached credentials: 'same-origin', // include, *same-origin, omit headers: { 'Content-Type': 'application/json', // 'Content-Type': 'application/x-www-form-urlencoded', }, body: JSON.stringify(creds.Data) }; //wait for the promise to come back: let response = await fetch(publish_api, requestOptions); let authorization = await response.json() mainprops.setJwtHolder(authorization.token_type); mainprops.setJwtToken(authorization.access_token); mainprops.setVisitorType('buyside') // publish parses JSON response into native JavaScript objects }Obviamente hay algunos componentes en el medio.
Cuando realice solicitudes futuras a otras API, incluiré ese jwttoken en el encabezado. (No estoy seguro de por qué repito la palabra token aquí).
Y agregue un condicional para una respuesta 401 para cambiar el estado de jwtholder .