Best way to restrict page access?

Question

I'm designing a website with a form component that redirects to a "failure" or "success" component based on whether the form submits without an error or not. Here is the code I'm using:

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

This works well even when I intentionally make a bad request by turning my network off or changing the route. However, I can type in the "/success" route in my browser and access it whether or not I've submitted the form. How do I restrict this behavior?

Answer 1

I'm not sure if it is possible to track that the route was entered manually, but you can pass to the "success" component props like "submit: true", and render component if this props exist.

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 }
   });
 });

And in "success" component check props like:

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