React登录功能中用户凭证暴露在URL的问题求助

问题根源 #

HTML表单默认采用GET方法提交，点击提交按钮后，浏览器会自动把表单字段拼接到URL中。你的代码没有阻止表单的默认提交行为，所以即使调用了自定义的登录逻辑，浏览器还是会执行默认的GET提交，导致邮箱和密码明文出现在URL里。

修复方案 #

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

修改Login组件中form的onSubmit处理函数，接收event参数并调用event.preventDefault()，彻底阻断浏览器的默认提交动作：

<form
  onSubmit={(event) => {
    event.preventDefault(); // 阻止默认表单提交
    loginFunc(event);
  }}
>

同步调整loginFunc的定义，确保它能接收event参数（因为表单验证方法form.validate需要用到这个参数）：

const loginFunc = (event) => {
  const isValid = form.validate(event);
  props.login(fields, isValid);
}

2. 显式指定表单提交方法（可选但推荐） #

给form标签加上method="POST"，明确告知表单的提交方式，避免后续维护时产生误解：

<form
  method="POST"
  onSubmit={(event) => {
    event.preventDefault();
    loginFunc(event);
  }}
>

3. 补全登录成功后的页面跳转 #

之前代码里注释掉了页面跳转逻辑，现在可以恢复，提升用户体验。需要在Login组件中引入useNavigate：

import { useNavigate } from 'react-router-dom';

// 组件内部初始化导航方法
const navigate = useNavigate();

然后把navigate传递给login函数，在登录成功后执行跳转：

const loginFunc = (event) => {
  const isValid = form.validate(event);
  props.login(fields, isValid, navigate);
}

同步修改Helper中的login函数，添加跳转逻辑：

var login = (fields, isValid, navigate) => {
  if (isValid) {
    axios.post("http://localhost:7070/FP/users/login", {
      email: fields.email,
      password: fields.password
    })
      .then(function (response) {
        if (response.data) {
          setSessionStorage("userName", response.data.firstName);
          setSessionStorage("user", response.data);
          setSessionStorage("isLoggedIn", true);
          setSessionStorage("token", "1234");
          window.alert("Logged in as " + response.data.firstName);
          navigate("/"); // 登录成功跳转到首页
          console.log(response); 
        } else {
          window.alert("Credentials do not match");
        }
      })
      .catch(function (error) {
        console.log(error);
        window.alert("登录失败，请稍后重试");
      });   
  }
};

额外注意事项 #

• 后端验证：不要在前端判断密码是否匹配，前端验证仅用于提升用户体验，真正的验证必须在后端完成，避免安全风险。
• 存储安全：不要把用户密码存在sessionStorage里，当前代码中setSessionStorage("user", response.data)如果包含密码，建议移除密码字段。

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