useNavigate 不适用于 HOC 组件

Question

这是我的第一个问题。 我正在自学 React.js、Node.js 和 Express。因此，我尝试创建自己的网站，只有登录成功，用户才能注册、登录并使用其数据访问页面。

如果登录成功，则会使用用户的电子邮件作为负载创建令牌。此外，我想使用一个名为

Protect

的高阶组件 (HOC)，以便在我的

App.js

文件中，我有类似的内容：

<Route
    path="/ProtectedPage"
    element={<Protect component={<ProtectedPage />} />}
/>

在

handleFormSubmit

的

FormLogin

功能中，我添加了

    navigate('/ProtectedPage');

但即使登录成功，我也不会收到任何错误或重定向。了解

Protected

向

发出 GET 请求可能会很有用

const verifyToken = (req, res, next) => {
  const token = req.cookies.token;

  if (!token) {
    res.status(401).send('Access Denied');
  } else {
    jwt.verify(token, secret, function (err, decoded) {
      if (err) {
        res.status(401).send('No Valid Token!');
      } else {
        req.email = decoded.email;
        req.token = token;
        console.log('verifyToken: ', req.email);
        next();
      }
    });
  }
};

app.get('/checkAuth', verifyToken, (req, res) => {
    res.sendStatus(200).send({ authenticated: true, email: req.email, token: req.token});
});

您可以通过此链接查看我的代码：https://github.com/CiccioLagXCVIII/MyOwnSite.git

感谢任何愿意回复的人。

我已经尝试使用

console.log

来验证数据是否正确接收和发送，确实如此。我的问题是，登录成功后，我在控制台中看不到任何错误，但没有发生重定向。

Answer 1

首先澄清一下术语：

Protect

不是高阶组件，例如它不是一个以 React 组件作为参数并返回 decorated React 组件的函数，它只是一个带有

component

prop 的常规 React 组件。

问题在于

Protect

使用与未经身份验证的用户匹配的初始

authenticated

值，并且在初始渲染时会将用户重定向到

"/login"

路线。

从“未知”身份验证状态开始，等待

checkAuth

代码完成并更新

authenticated

状态，然后再呈现受保护的内容或重定向。

示例：

const Protect = ({ component: Component }) => {
  const [authenticated, setAuthenticated] = useState(); // <-- initially undefined

  useEffect(() => {
    const checkAuth = async () => {
      try {
        const response = await axios.get(
          'http://localhost:5000/checkAuth',
          { withCredentials: true }
        );
        setAuthenticated(response.status === 200);
      } catch (error) {
        setAuthenticated(false);
      }
    };

    checkAuth();
  }, []);

  if (authenticated === undefined) {
    return null; // <-- or loading indicator/spinner/etc
  }

  return authenticated ? <Component /> : <Navigate to="/Login" replace />;
};