忘记密码在 mern 堆栈的前端实现答案

【问题标题】：forgot password implement on frontt end in mern stack忘记密码在 mern 堆栈的前端实现
【发布时间】：2022-11-26 00:45:40
【问题描述】：

我创建了一个端点，忘记了 mern 堆栈中的密码。我在使用 Thunder 客户端发送忘记密码时为忘记密码创建了一个 API，它将忘记密码链接发送到客户端以输入电子邮件 ID，但我想在忘记密码前端页面中实现它。我试过了，但没用

This is my thunder client screenshot Api work perfect

API work screenshot

邮件接收截图 click here to see image

This is my Reset.js frontend file

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify';


const Reset = () => {
  const navigate = useNavigate()
  const [email, setEmail] = useState({email: ""})
  const postData = async (e) => {
    e.preventDefault();
    // eslint-disable-next-line
    // if (!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)) {
    //   toast.error("invalid email");
    //   return
    // }
      const response = await fetch("http://localhost:5000/api/auth/reset-password", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email
      })
    }).then(res => res.json())
      .then(data => {
        if (data.error) {
          toast.error("invalid data");
        }
        else {
          toast.success("valid email")
          navigate('./login')
        }
      }).catch(err => {
        console.log(err);
      })
  }

  return (
    <div>
      <form>
        <div className="container" style={{ marginTop: "4.8rem", marginRight: "0px" }}>
          <div className="col-md-6 col-lg-6 col-xl-4 offset-xl-1">
            <div className="form-outline mb-4">
              <label className="form-label" htmlFor="form3Example3"> Enter valid Email address</label>
              <input type="email" id="email" value={email} onChange={(e)=>setEmail(e.target.value)} name="email" className="form-control form-control-lg" required
                placeholder="Enter email address" style={{ backgroundColor: "#eaedf0" }} />
            </div>
            <div className="text-center text-lg-start mt-2">
              <button type="submit" onClick={() => postData()} className="btn btn-outline-warning btn-lg">send link</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  )
}

export default Reset

任何帮助将不胜感激

【问题讨论】：

标签： javascript node.js mern forgot-password

【解决方案1】：

我看到 2 个可能的问题：

你正在以严格的形式发送身体。尝试用 json 发送它。
在 Thunder 客户端中，我看到 3 个标头。默认情况下有 2 个标头，所以我猜你一定是添加了一个额外的标头。检查是否需要将其添加到获取。

【讨论】：

【解决方案2】：

访问链接寻找解决方案https://youtu.be/Jf_xsIEzATY
您会找到解决方案的。

【讨论】：