JWT注册问题：返回用户已存在仍跳转首页，如何调整跳回登录页

问题原因 #

• fetch API 仅在网络请求失败时才会抛出异常进入catch块，接口返回业务错误（比如用户已存在的4xx状态码）时仍然会执行try块内的后续逻辑，你当前没有对接口返回的业务状态做判断，不管返回结果都直接存储token、设置登录状态，所以即使用户已存在也会走成功逻辑
• 跳转/状态切换逻辑没有做分支判断，不管注册成功失败都执行了相同的逻辑
• toggleSignup方法放在了try/catch外部，无论请求成功失败都会执行，不符合业务预期

修复方案 #

先和后端确认用户已存在时的返回特征：比如是返回409状态码，还是返回的json里有对应错误标识，比如success: false或者message: "用户已存在"，参考修复代码如下：

const onSubmitForm = async (e: any) => {
  e.preventDefault();
  try {
    const body = { email, password, name };
    const response = await fetch('http://localhost:5000/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(body),
    });

    // 先判断http状态码是否正常
    if (!response.ok) {
      // 非2xx状态直接抛出错误，进入catch块处理
      const errRes = await response.json();
      throw new Error(errRes.message || '请求失败');
    }

    const parseRes = await response.json();
    console.log(parseRes);
    // 若后端用自定义业务状态标识结果，可额外加判断，示例：
    // if (!parseRes.success) throw new Error(parseRes.message);
    
    // 只有注册成功才执行下面的逻辑
    localStorage.setItem('token', parseRes);
    props.setAuth(true);
    history.push('/home'); // 注册成功跳首页
    toggleSignup(); // 只有成功才切换弹窗状态
  } catch (error) {
    let errorMessage = 'Server error';
    if (error instanceof Error) {
      errorMessage = error.message;
    }
    console.error(errorMessage);
    // 判断是用户已存在的错误就跳登录页
    if (errorMessage === '用户已存在') {
      history.push('/login');
    }
  }
};

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