next.js 如何防止用户的凭据显示在URL上?

axkjgtzd  于 2023-01-05  发布在  其他
关注(0)|答案(2)|浏览(118)

我有一个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>
lmvvr0a8

lmvvr0a81#

既然你说这是连接速度慢的原因-意味着JS还没有下载,而你提交你的表单。
我看没什么解决办法:
1.将method="POST"添加到表单中-仍然不是通过JS而是通过HTML表单执行提交
1.最初隐藏表单或禁用提交按钮。然后在JS加载时启用表单

oxalkeyp

oxalkeyp2#

使用btoa()和atob()js函数来加密和解密

相关问题