如何防止登录 NextJS 后在 URL 上显示用户凭据？

Question

我希望用户登录并将其定向到主页，而不是用户的凭据显示在 URL 中，如下所示： http://localhost:3000/auth/login?email=test%40gmail.com&password=test。

令牌已正确创建，但重定向无法正常工作。这是handleSubmit函数：

 const [state, setState] = useState({
    email: "",
    password: "",
  });
 async function handleSubmit() {
    console.log(state);
    const res = await fetch(LOGIN_API_BASE_URL, {
      method: "POST",
      body: JSON.stringify(state),
      headers: {
        "Content-Type": "application/json",
        credentials: "omit",
      },
    });
    if (res.ok) {
      const json = await res.json();
      localStorage.setItem("token", json.token);
      router.push("/"); 
    } else {
      alert("Bad credentials");
    }
  }

我正在使用 Java JWT 创建令牌并在前端部分使用 NextJS 处理它。

我尝试了所有可能的解决方案，但没有任何效果，我猜测自从创建令牌以来后端代码编写正确。 控制台中显示的状态值的写法如下：

{邮箱：“[email protected]”，密码：“test”}

Answer 1

这是您的应用程序的正常行为。您需要手动阻止它。从

event

函数中的按钮传递

handleSubmit()

并调用

preventDefault()

方法。

所以，在你的按钮中你可以这样做，

<button onClick={(event) => handleSubmit(event)}>
</button>

并修改您的代码以调用

preventDefault()

async function handleSubmit(event) {
    evnet.preventDefault();
    console.log(state);
    // rest of your code
  }