限制页面访问的最佳方法？

Question

我正在设计一个带有表单组件的网站，该组件根据表单提交是否没有错误来重定向到“失败”或“成功”组件。这是我正在使用的代码：

await axios
  .post('/api/patients/', data, axiosConfig)
  .then((response) => {
    history.push('/success');
  })
  .catch((error) => {
    history.push('/failure');
  });

即使我通过关闭网络或更改路由故意发出错误请求，这也能正常工作。但是，我可以在浏览器中输入“/success”路由并访问它，无论我是否提交了表单。如何限制这种行为？

Answer 1

我不确定是否可以跟踪手动输入的路线，但您可以将“提交：true”等“成功”组件道具传递给“成功”组件，并在此道具存在时渲染组件。

await axios
.post('/api/patients/', data, axiosConfig)
    .then((response) => {
        history.push({
          pathname: '/success',
          state: { submit: true }
        });
 })
 .catch((error) => {
   history.push({
     pathname: '/failure',
     state: { submit: true }
   });
 });

并且在“成功”组件中检查道具，例如：

if (props.location.state.submit) { . . . }