如何防止付款后直接访问成功页面？-解网

问：

我正在使用React 18.0，React Router Dom（v6），并且我正在尝试实现PayPal结账。它运行良好，付款后，我将用户重定向到我的成功页面，其中包含用户的下载链接。问题是这个成功页面总是可以访问的。因此，我尝试在结帐后立即允许访问。之后，应将用户重定向到家庭。

我尝试这样做，但没有成功：

import { useEffect } from "react"
import { useLocation, useNavigate } from "react-router-dom"
import { getInvoiceUrl } from "../services/invoiceService"

function Success() {
    // Get the state from navigate on the Checkout page
    let { state, pathname } = useLocation()
    const navigate = useNavigate()

    // Check the state in order to redirect the user to the homepage if the state is empty
    useEffect(() => {
        if (state === null || state === undefined) {
            navigate("/")
            return
        }
        // Clear the state after the user exits from the Success page
        return navigate(pathname, { replace: true })
    })

    if (state === null || state === undefined) {
        return
    }

    console.log("state:", state)
    return (
                  <>
                    <div>
                        Thank you!
                    </div>
                    <div>
                        Abbiamo appena inviato un'email a
                        <span>
                            {state.email}
                        </span>
                        con in allegato la tua ricevuta (per favore, controlla la cartella SPAM se non dovessi vederla).
                    </div>
                    <div>
                        Puoi anche scaricare la ricevuta facendo click qui:
                        <a download href={getInvoiceUrl()}>
                            Download
                        </a>
                    </div>
                  </>
    )
}

export default Success

反应js PayPal 反应路由器-dom

  let { state, pathname } = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    if (!state) {
      navigate("/");
    }

    return function cleanup() {
      navigate(pathname, { replace: true });
      navigate("/");
    };
  }, []);

  if (!state) {
    return null;
  }

  return (
      <div>
        Abbiamo appena inviato un'email a<span>{state.email}</span>
        con in allegato la tua ricevuta (per favore, controlla la cartella SPAM
        se non dovessi vederla).
      </div>
  );

function Success() {
  // Get the state from navigate on the Checkout page
  const { state } = useLocation();
  const navigate = useNavigate();

  // Check the state in order to redirect the user to the homepage if the state is empty
  useEffect(() => {
    if (!state) {
      navigate("/", { replace: true }); // <-- redirect to prevent access
      return;
    }
  });

  if (!state) {
    return null; // <-- return valid JSX
  }

  return ( ... );
}

或者，为了消除对的需要，返回组件。useEffectNavigate

function Success() {
  // Get the state from navigate on the Checkout page
  const { state } = useLocation();

  if (!state) {
    return <Navigate to="/" replace />; // <-- return Redirect
  }

  return ( ... );
}

如何防止付款后直接访问成功页面？

How to prevent direct access to success page after the payment?

评论

评论

评论