Actualmente estoy trabajando para actualizar la sesión de un usuario después de una solicitud de actualización del cliente. La idea aquí es mostrar los datos de usuario actualizados inmediatamente al Cliente después de que la actualización sea exitosa. Para esto, uso sesiones para almacenar los datos en lugar de tener que hacer una solicitud de obtención a la base de datos en cada actualización.
Mi problema es que cada vez que un usuario se actualiza, la sesión aún mantiene el valor anterior recuperado después de iniciar sesión a pesar de que lo configuré en uno nuevo. Entonces, la solicitud updateMyProfile no guarda los datos en la sesión. Esto es algo que pruebo con mi solicitud de autenticación que se llama al actualizar para recuperar datos de usuario para un usuario actual
/Servidor
app.use( session({ key: "someID", secret: "someSecret", //Normally this has to be long and complex for security resave: false, rolling: true, saveUninitialized: false, cookie: { //How long will the cookie live for? expires: 60 * 60 * 1000, //Expires after one hour } })); app.patch('/updateMyProfile', verifyJWT, async(req, res) => { const name = req.body.name; const email = req.body.email; const phoneNr = req.body.phoneNr; const id = req.body.id; var updated = "UPDATE users set name = ?, email = ?, phoneNr = ? WHERE id = ?;"; var retrieved = "SELECT * FROM users WHERE id = ?;"; db.query(updated, [name, email, phoneNr, id], (err, result) => { if (err) { res.send({message: err}) //Sending error to front-end console.log(err); } if (result) { db.query(retrieved, id, (err, resultRetrieved) => { if (err) { res.send({message: err}) //Sending error to front-end console.log(err); } else { req.session.user = resultRetrieved; //Session is updated to contain new data! res.send({user: resultRetrieved, message: "Update succesful!"}); console.log("User is now: " + req.session.user[0].name); res.end(); } })} }); });//Este método se llama en cada actualización en el cliente a través de la función UseEffect
app.post('/authenticate', (req, res) => { //An endpoint for user-auth const token = req.body.token; const userSession = req.session.user; jwt.verify(token, "jwtSecret", (err, decoded) => { if (err) { res.send({auth: false, user: "No valid token!"}); console.log('No valid token'); } else if (userSession) { //Verified user! < -----------------> res.send({auth: true, user: userSession}); console.log(userSession[0].name + ' is in!'); } else { //Else if user is not verified, we return an empty object with rejected authentication res.send({auth: false, user: 'No user session!'}); console.log('No user session'); } }) });Este es un ejemplo del Cliente en una solicitud de actualización
const update = () => { Axios.patch("http://localhost:3001/updateMyProfile", {name: name, email: email, phoneNr: phoneNr, id: id}, {headers: {"x-access-token": localStorage.getItem("token")}} ).then( (response) => { alert(response.data.message); } ); }El código anterior, aunque es un poco inusual en la forma en que combina los usos de las sesiones del lado del servidor y las sesiones del lado del cliente (JWT), no es incorrecto ni está roto.
El problema en este caso estaba en el lado del cliente, con la forma en que se manejaban las cookies, lo que significaba que aparentemente no se aplicaban actualizaciones a los datos de la sesión.
El servidor configuró correctamente la cookie de sesión y el cliente la aceptó; sin embargo, no se incluyó en otras solicitudes. Esto significaba que las solicitudes futuras parecían tener datos de sesión incorrectos porque el servidor vio cada solicitud como una solicitud nueva sin una sesión anterior. Este hecho se ocultó porque el JWT se usa para verificar que el usuario haya iniciado sesión, en lugar de verificar la sesión del lado del servidor.
Axios se está utilizando para realizar solicitudes en el lado del cliente, las solicitudes no se enviaban con el encabezado de cookie adecuado.
Para remediar esto, cada solicitud debe contar con la opción withCredentials de la siguiente manera:
Axios.patch(address, data, { withCredentials: true }).then(handleResponse);