在 useEffect Hook 中检索参数并将参数设置为获取请求中的参数

Question

我正在开发一个 MERN 应用程序。目前我正在处理我的密码重置电子邮件、验证 ResetToken、重置和更新密码。至此，我已经能够在后端完成All了。

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

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

在我的后端，restPassword：

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 进行测试时，我得到了正确的响应

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

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;

我尝试在发送给用户的电子邮件中检索附加到路径 (http://localhost:3000/reset/c25d7b114e99e8720761732eb1670a3d0a084877) 的参数（令牌），以便我可以在我的获取请求中使用它，但到目前为止我还不能。

我的响应数据的控制台日志是状态 401（响应 {type: "basic", url: "http://localhost:3000/user/reset/", 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;

Answer 1

所以经过一番挖掘，我得到了答案，

我要做的第一件事是更新我的“react-router”和“react-router-dom”。

根据我收集到的信息，您至少需要 5.1.2 版本才能执行此操作。

另外，请确保您为两个依赖项运行相同的版本。

所以在我的情况下，我已经更新为

“反应路由器”：“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} />

所以现在的浏览器网址是http://localhost:3000/reset/ab4794396674412e00406beda674349400c1f5ad

在上面记录的控制台上。我有以下结果。 控制台.log（令牌）； 结果：ab4794396674412e00406beda674349400c1f5ad

console.log(位置); 结果：{路径名：“/reset/ab4794396674412e00406beda674349400c1f5ad”，搜索：“”，哈希：“”，状态：未定义}

console.log(currentPath); 结果：/reset/ab4794396674412e00406beda674349400c1f5ad

console.log(searchParams); 结果：URLSearchParams {append: function, delete: function, get: function, ...}