如何在前端Node js中获取重置密码api

Question

我是网络开发专业的学生。目前，我正在尝试构建一个基本项目，我正在努力实现重置密码功能，我真的需要帮助来了解如何使用 Axios 在前端获取重置密码 API。简而言之，我实现的重置密码 API 在 Postman 上运行良好，但每当我尝试在前端传递并获取 API 以使用户能够输入他们的新密码和 passwordValidation 我有点迷路，下面我分享我的代码片段：

后台代码重置密码

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)
  }
};

路线：

router
  .route('/api/v1/users/resetpassword/:token')
  .get(viewsController.getResetPasswordUrl)
  .patch(viewsController.resetpassword);

控制器

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'
  });
};

前端抓取api代码：

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);
  }
};

Answer 1

在前端，您正在向 http://127.0.0.1:3000/api/v1/users/resetpassword/:token 发出请求。由于 token 是路由参数，因此您直接传入字符串 ":token" 而不是令牌的实际值。

试试这个：

const res = await axios({
    method: 'PATCH',
    url:
        `http://127.0.0.1:3000/api/v1/users/resetpassword/${token}`,
    data: {
        password,
        passwordValidation
    }
  });

其中 token 是您需要定义的变量。

假设你使用的是express，这里有一些关于参数路由的文档：https://expressjs.com/en/guide/routing.html#route-parameters

Answer 2

我通过以下步骤解决了我的问题：

1- 在我的“/resetpassword/:token”路由中仅使用 GET 请求，并使用 Axios 提交 PATCH 请求。

2- 传递 'token' 以及 'password' 和 'passwordValidation' 作为 PATCH 请求中的输入数据。

3- 在 'resetPassword' 表单中创建隐藏输入，以便在用户确认更新后的密码时提交 'token' 密码和 'passwordValidation'。

下面是我的代码片段，用于解释解决方案：

路线：

router.get(
  '/resetpassword/:token',
  viewsController.resetPassword
  )

控制器

exports.resetPassword = (req, res) => {
  const token = req.params.token;
  res.status(200).render('/login', {
    title: 'reset password successfuly', { token }
  });
};

front-end 获取 API 代码：

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);
  }
};

重置密码形式：

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

希望我的解决方案对其他开发者有所帮助！

如何在前端Node js中获取重置密码api

how to fetch reset password api in front-end Node js

javascript

node.js

reset-password

axios