我有一个NextJS应用程序,有时不能按预期工作。
当我的连接速度很慢,并且网站的首次加载时间比正常情况下要长时,当我尝试登录到应用程序时,HTML表单的默认行为会被执行,我插入的凭据会显示在URL上,即使我在提交函数中有一个event.preventDefault()
,而且我没有使用GET。
我已经尝试过提高应用程序的性能,减少页面的首次加载,但是,如果用户可以使加载时间变慢,它可以被利用。
我只是想防止凭据显示在URL上。它可以被替换为任何类型的另一个错误。
下面是我的代码:
async function handleLogin(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
setIsLoadingLogin(true);
setError('');
const captchaValue = await captchaRef.current?.executeAsync();
if (!captchaValue) {
setError('Erro de captcha. Tente novamente mais tarde.');
return setIsLoadingLogin(false);
}
try {
const { access, refresh } = await loginService({
email,
password,
captcha_value: captchaValue,
});
setCookie(undefined, cookieNames.userAccessToken, access);
setCookie(undefined, cookieNames.userRefreshToken, refresh);
await router.push('/home');
} catch (error: any) {
if (error.response.status === 500) return setError('Erro no servidor.');
if (error.response.data.detail) return setError(error.response.data.detail);
} finally {
setIsLoadingLogin(false);
setPassword('');
captchaRef.current?.reset();
}
}
<form onSubmit={handleLogin}>
...
</form>
2条答案
按热度按时间lmvvr0a81#
既然你说这是连接速度慢的原因-意味着JS还没有下载,而你提交你的表单。
我看没什么解决办法:
1.将
method="POST"
添加到表单中-仍然不是通过JS而是通过HTML表单执行提交1.最初隐藏表单或禁用提交按钮。然后在JS加载时启用表单
oxalkeyp2#
使用btoa()和atob()js函数来加密和解密