Я создаю новый сайт с помощью NextJS, проблема, с которой я столкнулся, связана с конечной точкой проверки сброса пароля.
Когда пользователь запускает сброс пароля, он переходит к API, выполняет всю обработку и затем возвращает их во внешний интерфейс NextJS на /verifyreset
, который сохраняет код в локальном хранилище, выполняет небольшую обработку и затем пересылает их. на другую страницу.
Проблема в том, что есть макет по умолчанию, обертывающий компонент в моем _app.js следующим образом;
function MyApp({ Component, pageProps }) {
return (
<DefaultLayout><Component {...pageProps} /></DefaultLayout>
);
}
Это означает, что макет отображается на конечной точке /verifyreset
, и я хочу, чтобы эта конечная точка обрабатывала данные.
Есть ли способ обойти это? иметь конечную точку, которая может получить доступ к локальному хранилищу, но не быть, так сказать, страницей
2 ответа
Я частично понял ваш вопрос, это было бы ясно, если бы вы добавили в вопрос больше фрагментов кода.
Во всяком случае, из вашего заявления ниже:
Когда пользователь запускает сброс пароля, он переходит к API, выполняет всю обработку и затем возвращает их во внешний интерфейс NextJS на / verifyreset, который сохраняет код в localstorage, выполняет небольшую обработку и затем перенаправляет их на другую страницу. .
Что я понял:
- Пользователь запускает сброс пароля [скажем, со страницы PageS]
- Вызывается API; некоторая обработка происходит
- Затем API перенаправляет пользователя на страницу / verifyreset [скажем, PageB]
- При переходе на страницу информация сохраняется в localstorage
- Как только это будет выполнено, пользователь будет перенаправлен на другую страницу [скажем, 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. После завершения удалите строку запроса со страницы, не обновляя страницу.
Вы должны поместить /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
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.