在useEffect Hook中的fetch请求中检索params并设置params作为参数。

问题描述 投票:0回答:1

我正在开发一个MERN应用程序。目前,我正在开发我的密码重置邮件,验证重置令牌,重置和更新密码。到目前为止,我已经能够在后端完成所有的工作。

在前端,我已经完成了ForgotPassword请求,向用户发送了一封带有重置令牌的邮件。

现在的问题是,我无法在前端检索到令牌。

在我的后端,restPassword.com是一个有效的URL。

userRouter.get('/reset/:token', (req, res) => {
    User.findOne({
        resetPasswordToken: req.params.token,
        resetPasswordExpires: { $gt : Date.now() },
    }).then((user) => {
      if (user == null) {
        console.error('password reset link is invalid or has expired');
        res.status(403).json({message : {msgBody : "password reset link is invalid or has expired", msgError: true}});
      } else {
        res.status(200).send({
          username: user.username,
          resetPasswordToken: user.resetPasswordToken,
          message: {msgBody : "password reset link a-ok", msgError: true},
        });
      }
    });
  });

当用一个有效的URL进行测试时,我得到了正确的响应。

enter image description here

在我的前端,我的路由器是这样设置的。

function App() {

    return (
        <div className="App">
            <Router >
                <Switch>
               
          ...

                    <UnPrivateRoute
                    path="/forgotPassword"
                    component={ForgotPassword} />

                    <UnPrivateRoute
                    path="/reset/:token"
                    component={ResetPassword} />

                    <UnPrivateRoute
                    path="/login"
                    component={Login} />
          ...
               </Switch>

            </Router>
        </div>
    );

}


export default App;

我试图检索附加在路径上的param(token) (http:/localhost:3000resetc25d7b114e99e8720761732eb1670a3d0a084877。),所以我可以在我的fetch请求中使用它,但到目前为止我不能。

我的响应数据的控制台日志是状态401(响应{type: "basic", url: "http:/localhost:3000userreset。", redirected: false, status: 401, ok: false, ...})

这是我的代码。任何有效的解决方案将非常感激。谅谅

const ResetPassword = props => {
 
  var url = new URL('http://localhost:3000/user/reset/?'); 
  var token = new URLSearchParams(url.search);

  useEffect(()=>{
    fetch('http://localhost:3000/user/reset/'+ token).then(data =>{
      console.log(data);
    });
   
  },[token]);



  });
  return (
   <>
    </>
  );
}

export default ResetPassword;
reactjs parameters fetch use-effect change-password
1个回答
0
投票

所以,经过一些挖掘,我得到了答案。

我首先要做的是更新我的 "react-router "和 "react-router-dom"。

据我所知,你至少需要一个5.1.2的版本来做这件事。

另外,确保你运行的两个依赖关系的版本是一样的。

所以在我的例子中,我已经更新到了

"react-router": "5.2.0", "react-router-dom": "5.2.0",

接下来我做的事情是从'react-router-dom'导入{ useLocation, useHistory , useParams}。

import React, {useState,useRef,useEffect} from 'react';
import { useLocation, useHistory ,  useParams} from 'react-router-dom';




const ResetPassword = props => {
  let { token } = useParams()
  console.log(token);
  const history = useHistory();
  const location = useLocation();
  console.log(location);
 

  useEffect(()=>{

    const currentPath = location.pathname;
    const searchParams = new URLSearchParams(location.search);
    console.log(currentPath);
    console.log(searchParams)
    
   
  },[location]);








  });
  return (
    <>
     
    </>
  );
}

export default ResetPassword;

在我的路由器中,我设置了页面的路由,如下所示

                    <UnPrivateRoute
                    path="/reset/:token"
                    component={ResetPassword} />

所以现在的浏览器URL是 http:/localhost:3000resetab4794396674412e00406beda674349400c1f5ad。

控制台上的记录。我有以下结果.console.log(token); 结果:ab4794396674412e00406beda674349400c1f5ad。

console.log(location);结果。{pathname: "resetab4794396674412e00406beda674349400c1f5ad", search: "", hash: "",状态:未定义}。

console.log(currentPath);Result: resetab4794396674412e00406beda674349400c1f5ad

console.log(searchParams);Result.URLSearchParams {append: function, delete: function, get: function, ...}。URLSearchParams {append: function, delete: function, get: function, ...}。

热门问题
推荐问题
最新问题