Как предотвратить прямой доступ к странице успеха после оплаты?

Я использую React 18.0, React Router Dom (v6) и пытаюсь внедрить Paypal Checkout. Это работает хорошо, и после оплаты я перенаправляю пользователя на мою страницу успеха, которая содержит ссылку для скачивания для пользователя. Проблема в том, что эта страница успеха всегда доступна. Итак, я пытаюсь разрешить доступ сразу после оформления заказа. После этого пользователь должен быть перенаправлен на домашнюю страницу.

Я пытался сделать так, но безуспешно:

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

что у тебя получилось state

Abbas Hussain 09.04.2022 18:03

@AbbasHussain state (например) {email: 'sb-jxe7u14612928@personal.example.com'} получен от navigate("/success", state) на странице оформления заказа.

KaMZaTa 09.04.2022 18:06

@AbbasHussain, если я удалю всю часть useEffect и оператор if, он будет работать нормально, но пользователь всегда сможет получить доступ к странице успеха. Я хочу разрешить доступ сразу после успешной оплаты заказа.

KaMZaTa 09.04.2022 18:09
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
2
3
35
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

лол, я просто создаю весь сценарий проблемы и думаю, что вы не возвращаете ничего, что вам нужно return null

Ошибка: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

просто попробуй это

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

enter image description here

Спасибо, но это не сработало. Если я оставлю часть useEffect и оператор if снаружи, пользователь ВСЕГДА перенаправляется домой, даже после успешной проверки. К сожалению, возврат null ничего не изменил.

KaMZaTa 09.04.2022 18:24

Исправлена! вопрос проверить.

Abbas Hussain 09.04.2022 19:01

Спасибо друг! благодаря вам я тоже узнаю новое.

Abbas Hussain 09.04.2022 19:02

Спасибо, но это все еще не работает. Меня всегда перенаправляют домой.

KaMZaTa 09.04.2022 20:08

Я проверил это сам, подождите, дайте мне создать коды и ящик

Abbas Hussain 09.04.2022 20:19

Я создал этот codeandbox: codeandbox.io/s/sparkling-sun-7qtyb6?file=/src/Checkout.jsx

KaMZaTa 09.04.2022 20:35

работает нормально, попробуйте выяснить, в чем проблема. Подсказка: это связано с реакцией версии 18 codeandbox.io/s/sweet-leakey-o0ette.

Abbas Hussain 09.04.2022 20:42
github.com/facebook/реагировать/вопросы/22839 в этом проблема, удалите тег StrictMode в индексном файле и увидите, что все будет работать отлично. Я использовал версию для реакции 17, поэтому она работала на моем компьютере.
Abbas Hussain 09.04.2022 20:45

Кажется, ты прав. Дай мне проверить!

KaMZaTa 09.04.2022 20:56

Проголосуйте и примите ответ, если это поможет.

Abbas Hussain 09.04.2022 21:10

Возврат компонента Navigate вместо хука navigate() работает даже без удаления StrictMode.

KaMZaTa 10.04.2022 13:43
Ответ принят как подходящий

Для условия state === null || state === undefined вы не возвращаете действительный JSX. Верните null сюда, чтобы указать React, что рендерить нечего.

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

ИЛИ, чтобы исключить необходимость в useEffect, верните компонент Navigate.

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

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

  return ( ... );
}

Использование компонента Navigate хорошо работает даже без удаления StrictMode! Кроме того, он чище, на мой взгляд.

KaMZaTa 10.04.2022 13:41

Другие вопросы по теме