Soy nuevo en la programación y actualmente estoy trabajando en un pequeño proyecto.
Estoy tratando de implementar alguna autorización usando JWT. He visto algunos videos en línea y descubrí que la mayoría de las personas tienen el token de acceso "Bearer" + en sus encabezados.
Revisé algunas publicaciones y descubrí que necesitaba agregar la autorización "Bearer" yo mismo, pero no estoy muy seguro de cómo llegar allí.
¿Puedo obtener ayuda?
Aquí hay algo de mi código.
Acceso
if(response){ if(await bcrypt.compare(loginPW, response.password)){ const accessToken = jwt.sign({ email: response.email },jwtSecret) res.json({status: 'ok', accessToken: accessToken}) }else{ return res.json({status: 'error', error:'Invalid Credentials'}) } }Publicar solicitud
const result = await fetch('/',{ method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ loginEmail, loginPassword, reqType }) }).then((res) => res.json());una forma posible es ... en el resultado de su solicitud de publicación, puede almacenar el token de acceso en localStorage
const result = await fetch('/',{ method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ loginEmail, loginPassword, reqType }) }).then((res) => res.json()).then(({accessToken})=>{ localStorage.setItem('accessToken', accessToken) });luego recuperarlo en todas sus solicitudes
const anotherRequst = await fetch('/anything',{ method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('accessToken')}` // get it from localStorage }, body: ... /// anything }).then((res) => res.json());esa es la forma mas sencilla
... para técnicas más avanzadas, intente usar Axios
y simplemente puede configurar el encabezado de autorización predeterminado en todas sus solicitudes
axios.defaults.authorization = localStorage.getItem('accessToken')entonces cualquier solicitud que realice tendrá el token de acceso en su encabezado
Axios.post(....) Axios.get(...) ....Puede agregar encabezados de 'Autorización' dentro de su solicitud así
const result = await fetch('/',{ method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${accessToken}` }, body: JSON.stringify({ loginEmail, loginPassword, reqType }) }).then((res) => res.json());O si se trata de un gran proyecto y tiene que enviar el token con cada solicitud, puede usar Axios, que le permite agregar encabezados comunes con cada solicitud usando solo una línea.
axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;Documentos: https://www.npmjs.com/package/axios
simplemente agregue el encabezado de autorización con su token para solicitar
const result = await fetch('/',{ method: 'POST', headers: { 'Content-Type': 'application/json' 'Authorization': `Bearer ${accessToken}` }, body: JSON.stringify({ loginEmail, loginPassword, reqType }) }).then((res) => res.json());