如何防止NextJS登录后用户凭证显示在URL中

核心问题 #

URL中出现邮箱、密码参数，说明登录表单触发了浏览器默认的GET提交行为，直接覆盖了你编写的handleSubmit里的POST请求逻辑，导致跳转异常。

具体修复步骤 #

1. 阻止表单默认提交行为 #

修改handleSubmit函数，接收事件参数并调用preventDefault()，彻底拦截浏览器的默认提交动作：

async function handleSubmit(e) {
  e.preventDefault(); // 关键：阻止默认GET提交
  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");
  }
}

2. 修正表单标签配置 #

确保登录表单显式设置method="post"，并正确绑定onSubmit事件：

<form onSubmit={handleSubmit} method="post">
  {/* 邮箱输入框 */}
  {/* 密码输入框 */}
  <button type="submit">登录</button>
</form>

3. 确认输入框状态绑定 #

检查输入框的onChange逻辑是否正确更新state（虽然控制台显示state正常，但需确保绑定无遗漏）：

<input
  type="email"
  value={state.email}
  onChange={(e) => setState(prev => ({...prev, email: e.target.value}))}
/>
<input
  type="password"
  value={state.password}
  onChange={(e) => setState(prev => ({...prev, password: e.target.value}))}
/>

验证方式 #

修复后点击登录按钮，浏览器URL不会出现凭证参数，POST请求正常发送，Token存入localStorage后将自动跳转至首页。

内容的提问来源于stack exchange，提问作者flaw