Post请求触发Axios 500错误，登录组件无法存储角色信息

问题现象 #

输入用户名和密码后触发Axios 500服务器内部错误，token已成功存入sessionStorage，但角色信息无法存储。

原组件代码 #

class LoginUserComponent extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      userName: "",
      password: "",
    };
    this.changeHandler = this.changeHandler.bind(this);
    this.login = this.login.bind(this);
  }

  changeHandler(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  login(event) {
    let userDet = {
      userName: this.state.userName,
      password: this.state.password,
    };
    const { userName, password } = this.state;
    console.log(userDet);
    AuthService.login(userDet).then(
      (res) => {
        sessionStorage.setItem("token", res.data);
        AuthService.getRole(userName, password).then((res) => {
        sessionStorage.setItem("role", res.data);
        if (sessionStorage.getItem("role",res.data) === "Admin") {
          console.log("Admin");
          this.props.navigate("/employees");
        }
        if (sessionStorage.getItem("role") === "User") {
          console.log("User");
          this.props.navigate("/add-employee");
        }
  })}

错误截图 #

问题根源与修复步骤 #

1. 代码层面问题修复 #

关键错误点

• sessionStorage.getItem("role",res.data)用法错误：getItem仅需传入键名参数，多余参数会被忽略
• 嵌套Promise未处理错误，请求失败时无捕获逻辑
• 未阻止表单默认提交行为，可能导致页面刷新丢失存储数据
• 代码存在语法闭合错误（Promise回调未完整闭合）

修复后代码

class LoginUserComponent extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      userName: "",
      password: "",
    };
    this.changeHandler = this.changeHandler.bind(this);
    this.login = this.login.bind(this);
  }

  changeHandler(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  login(event) {
    // 阻止表单默认提交，避免页面刷新
    event.preventDefault();
    
    const userDet = {
      userName: this.state.userName,
      password: this.state.password,
    };
    const { userName, password } = this.state;
    
    AuthService.login(userDet)
      .then((res) => {
        sessionStorage.setItem("token", res.data);
        // 链式调用替代嵌套Promise，提升可读性
        return AuthService.getRole(userName, password);
      })
      .then((res) => {
        sessionStorage.setItem("role", res.data);
        const userRole = sessionStorage.getItem("role");
        // 优化条件判断逻辑
        if (userRole === "Admin") {
          console.log("Admin");
          this.props.navigate("/employees");
        } else if (userRole === "User") {
          console.log("User");
          this.props.navigate("/add-employee");
        }
      })
      .catch((error) => {
        // 统一捕获所有请求错误，便于调试和用户提示
        console.error("登录或获取角色失败:", error);
        // 可在此添加前端错误提示，例如弹窗告知用户
      });
  }
}

2. 后端接口排查 #

Axios 500属于服务器内部错误，需重点检查getRole接口：

• 确认接口接收的参数名与前端传递的userName、password完全匹配（注意大小写、拼写）
• 查看后端日志，定位具体错误原因（如数据库查询失败、权限逻辑异常等）
• 使用Postman等工具直接调用getRole接口，验证是否能正常返回角色数据

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