Я создаю новый сайт с помощью NextJS, проблема, с которой я столкнулся, связана с конечной точкой проверки сброса пароля.

Когда пользователь запускает сброс пароля, он переходит к API, выполняет всю обработку и затем возвращает их во внешний интерфейс NextJS на /verifyreset, который сохраняет код в локальном хранилище, выполняет небольшую обработку и затем пересылает их. на другую страницу.

Проблема в том, что есть макет по умолчанию, обертывающий компонент в моем _app.js следующим образом;

function MyApp({ Component, pageProps }) {
    return (
        <DefaultLayout><Component {...pageProps} /></DefaultLayout>
    );
}

Это означает, что макет отображается на конечной точке /verifyreset, и я хочу, чтобы эта конечная точка обрабатывала данные.

Есть ли способ обойти это? иметь конечную точку, которая может получить доступ к локальному хранилищу, но не быть, так сказать, страницей

1
CodeSauce 11 Фев 2021 в 08:08

2 ответа

Лучший ответ

Я частично понял ваш вопрос, это было бы ясно, если бы вы добавили в вопрос больше фрагментов кода.

Во всяком случае, из вашего заявления ниже:

Когда пользователь запускает сброс пароля, он переходит к API, выполняет всю обработку и затем возвращает их во внешний интерфейс NextJS на / verifyreset, который сохраняет код в localstorage, выполняет небольшую обработку и затем перенаправляет их на другую страницу. .

Что я понял:

  1. Пользователь запускает сброс пароля [скажем, со страницы PageS]
  2. Вызывается API; некоторая обработка происходит
  3. Затем API перенаправляет пользователя на страницу / verifyreset [скажем, PageB]
  4. При переходе на страницу информация сохраняется в localstorage
  5. Как только это будет выполнено, пользователь будет перенаправлен на другую страницу [скажем, PageC]

Поправьте меня, если я ошибаюсь, поэтому ваш вопрос заключается в том, как вы могли фактически пропускать пользователей для просмотра / проверки страницы сброса, но делать такие вещи, как сохранение в localstorage и другие фоновые операции.

Ответ 1: API вызывается со страницы PageA (см. 1). Вместо того, чтобы API перенаправлял пользователя на страницу / verifyreset во внешнем интерфейсе, отправьте некоторые данные (JSON или XML) в вызывающую функцию (в компонентах PageA ..). На основе этих данных выполните обработку и, как только все будет завершено, перенаправьте пользователя на PageC. [не нужно беспокоиться о PageB, т. е. / verifyreset page]. Найдите фрагмент кода ниже:

**API End Point**

async resetPassword(req, res) {
try {
  const model = model.body || {};
  let data = await PasswordBusiness.reset(model);
  //data needs to have information that you require on frontend
  return res.json({success: true, data: data});
} catch (error) {
  return res.json({success: false, error: error});
}
}


** Frontend - pageA **


import Router from 'next/router';

const resetPassword = (model) => {
  callApiEndPoint(model).then(data) {
   // do what you want to do with data

   //finally navigate to page c
   Router.push('url-to-page-c');

  });
};


return <button onClick={resetPassword}> Reset </button>

Ответ 2: Если вам требуется перенаправление на страницу каким-либо образом из API [я думаю, вам это не обязательно], после завершения операции / обработки на стороне API перенаправьте пользователя прямо на pageC с некоторыми параметрами запроса с данными (если это не уязвимые данные). например / pagec? token = sometokens & otherinfos = otherinfos и выполнять действия на самой странице C. После завершения удалите строку запроса со страницы, не обновляя страницу.

1
Niraj Paudel 11 Фев 2021 в 07:53

Вы должны поместить /verifyreset в папку api.

Вот что сказал Next.js в своей документации:

Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page.

Ссылка: https://nextjs.org/docs/api-routes/introduction

0
pors 11 Фев 2021 в 06:02
66149059