Soy estudiante de desarrollo web. Actualmente, estoy tratando de construir un proyecto básico, donde estoy apilado en la implementación de la función de restablecimiento de contraseña, realmente necesito ayuda para obtener la API de restablecimiento de contraseña en el front-end usando Axios. En resumen, la API de restablecimiento de contraseña que implementé funciona bien en Postman, pero cada vez que traté de pasar por el front-end y obtener la API para permitir que los usuarios ingresen su nueva contraseña y validación de contraseña, perdí un poco, a continuación comparto mi código fragmentos:
contraseña de restablecimiento de código backend
resetPassword = async(req, res) => { try { // Step 1: Get user based on the token const validateHashedToken = crypto .createHash('sha256') .update(req.params.token) .digest('hex'); const user = await User.findOne( { passwordResetToken: validateHashedToken, passwordResetExpires: { $gt: Date.now() } }); user.password = req.body.password; user.passwordValidation = req.body.passwordValidation; user.passwordResetToken = undefined; user.passwordResetExpires = undefined; await user.save(); // Step 3: Update the "passwordChangedAt" date // Step 4: Log the user in and send a JWT genResJWT(user, 200, res); } catch (error) { console.log('error', error) } };Rutas:
router .route('/api/v1/users/resetpassword/:token') .get(viewsController.getResetPasswordUrl) .patch(viewsController.resetpassword);controladores
exports.getResetPasswordUrl = async(req, res) => { try { const { token } = req.params.token; const validToken = await User.findOne( { passwordResetToken: token } ); res.status(200).render('resetPassword', { title: 'resetpassword', token: validToken }); } catch (error) { console.log(error); } }; exports.resetpassword = (req, res) => { // I'm stack here and I really need help res.status(200).render('profile', { title: 'reset password successfuly' }); };código api de obtención de front-end:
import axios from 'axios'; export const resetPassword = async (password, passwordValidation) => { try { const res = await axios({ method: 'PATCH', url: `http://127.0.0.1:3000/api/v1/users/resetpassword/:token`, data: { password, passwordValidation } }); if (res.data.status === 'success') { window.setTimeout(() => { location.replace('/me'); }, 500); } } catch (error) { console.log('error', error.response.data.message); } };En la interfaz, está realizando una solicitud a http://127.0.0.1:3000/api/v1/users/resetpassword/:token . Dado que el token es un parámetro de ruta, está pasando directamente la cadena ":token" y no el valor real del token.
Prueba esto en su lugar:
const res = await axios({ method: 'PATCH', url: `http://127.0.0.1:3000/api/v1/users/resetpassword/${token}`, data: { password, passwordValidation } }); donde token es una variable que necesita definir.
Suponiendo que está utilizando express, aquí hay alguna documentación sobre el enrutamiento de parámetros: https://expressjs.com/en/guide/routing.html#route-parameters
Resolví mi problema con los siguientes pasos:
1- Usar solo la solicitud GET en mi ruta '/resetpassword/:token' y enviar la solicitud PATCH con Axios.
2- Pase el 'token' junto con la 'contraseña' y la 'validación de contraseña' como datos de entrada en la solicitud PATCH.
3- cree una entrada oculta dentro del formulario 'resetPassword' para enviar el 'token' con la contraseña y la 'validación de contraseña' cada vez que los usuarios confirmen su contraseña actualizada.
A continuación se muestra mi fragmento de código para explicar cómo va la solución:
Rutas:
router.get( '/resetpassword/:token', viewsController.resetPassword )controladores
exports.resetPassword = (req, res) => { const token = req.params.token; res.status(200).render('/login', { title: 'reset password successfuly', { token } }); };código API de obtención de front-end:
import axios from 'axios'; export const resetPassword = async (password, passwordValidation, token) => { try { const res = await axios({ method: 'PATCH', url: `/api/v1/users/resetpassword/${token}`, data: { password, passwordValidation } }); if (res.data.status === 'success') { window.setTimeout(() => { location.assign('/login'); }, 1000); } } catch (error) { console.log('error', error.response.data.message); } };el formulario resetPassword:
extends goaheadtravel block content main.main .resetpassword-form h2.heading-secondary.ma-bt-lg Please enter a new password and validate it form.form.resetpassword--form .form__group.ma-bt-md label.form__label(for='password') Password input#password.form__input(type='password' placeholder='••••••••' required='' minlength='8') .form__group.ma-bt-md label.form__label(for='passwordValidation') Confirm password input#passwordValidation.form__input(type='password' placeholder='••••••••' required='' minlength='8') input#resetToken(type='hidden' value=`${token}`) .form__group.right button.btn.btn--green Confirm new password¡Espero que mi solución ayude a otros desarrolladores!