登录成功后如何正确重定向？HTTPOnly Cookie认证问题修复

问题描述 #

使用HTTPOnly Cookie进行用户认证，期望登录成功后从登录页重定向至首页，但目前代码在输入错误用户名或密码时，页面仍会跳转到首页且用户未登录，需要修改代码实现仅凭证正确时跳转。

原Login.jsx代码 #

function Login({ onUpdateUser }) {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
  });

  const navigate = useNavigate();

  function handleChange(e) {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  }

function handleSubmit(e) {
    e.preventDefault();
     fetch("http://localhost:3000/api/v1/login", {
      method: "POST",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
    })
     .then((r) => {
        if (!r.ok) throw Error("Incorrect username or password!")
        .then(navigate('/login'))
      })
      .then((user) => onUpdateUser(user))
      .then(navigate('/'))
  }
}

修复方案及修改后代码 #

问题出在Promise链式调用逻辑错误：错误抛出后未被正确捕获，且跳转首页的操作位于链式末尾，无论请求成败都会执行。修改时需将成功后的操作放在响应正常的分支内，错误时捕获并阻止跳转。

function Login({ onUpdateUser }) {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
  });
  const [errorMsg, setErrorMsg] = useState(""); // 新增状态存储错误提示

  const navigate = useNavigate();

  function handleChange(e) {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  }

  function handleSubmit(e) {
    e.preventDefault();
    setErrorMsg(""); // 提交前清空旧错误提示
    fetch("http://localhost:3000/api/v1/login", {
      method: "POST",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
    })
    .then((r) => {
      if (!r.ok) throw new Error("Incorrect username or password!");
      return r.json(); // 解析响应体获取用户数据
    })
    .then((user) => {
      onUpdateUser(user);
      navigate('/'); // 仅登录成功时跳转首页
    })
    .catch((err) => {
      setErrorMsg(err.message); // 在登录页显示错误提示
      // 错误时停留在登录页，不执行跳转
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单输入组件（如用户名、密码输入框） */}
      {errorMsg && <p style={{color: 'red'}}>{errorMsg}</p>}
      <button type="submit">登录</button>
    </form>
  );
}

修改要点说明 #

• 修正错误抛出后的链式调用逻辑，将错误捕获移至catch方法中，避免错误分支的代码嵌套混乱
• 仅在请求响应正常、获取到用户数据后，才执行更新用户状态和跳转首页的操作
• 新增错误提示状态，在登录页展示错误信息，提升用户体验
• 提交表单前清空错误提示，避免旧提示干扰新的登录操作

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