登录时Axios请求URL出现[object Object]/undefined，角色无法存储问题

1. getRole接口传参错误（URL异常核心原因） #

• 问题：AuthService.getRole() 定义时要求接收userName和password两个字符串参数，但LoginComponent调用时传入了整个userDet对象，导致URL拼接为/role/[object%20Object]/undefined。
• 修复：调用时传入userDet.userName和userDet.password两个单独参数。

2. 异步请求未等待导致角色判断失效 #

• 问题：getRole是异步Axios请求，后续的角色判断和页面跳转代码同步执行，此时sessionStorage尚未存入role值，判断逻辑完全失效。
• 修复：将角色判断和跳转逻辑移至getRole的then回调内部，确保异步请求完成后再执行。

3. RegisterComponent嵌套state更新隐患 #

• 问题：RegisterComponent中state的role是嵌套对象，但原changeHandler直接用setState({[event.target.name]: ...})无法更新嵌套的role.roleId或role.roleName，会在state中新增平级的roleId/roleName字段而非更新嵌套对象。
• 修复：修改changeHandler处理嵌套字段，配合表单name属性完成正确更新。

修改后的AuthService.js（无需改动，仅确认参数定义） #

import axios from 'axios';

const GET_AUTH_API_BASE_URL = "http://localhost:8087/auth";

class AuthService {
    login(user){
        return axios.post(GET_AUTH_API_BASE_URL+"/login",user);
    }
    getRole(userName,password){
        return axios.get(GET_AUTH_API_BASE_URL+"/role/"+userName+"/"+password);
    }
}
export default new AuthService();

修改后的LoginComponent.js（核心修复） #

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,
    };
    console.log(userDet);
    AuthService.login(userDet).then(
      (res) => {
        sessionStorage.setItem("token", res.data);
        
        // 修复传参：传入正确的用户名和密码
        AuthService.getRole(userDet.userName, userDet.password).then((res) => {
          sessionStorage.setItem("role", res.data);
          // 修复异步逻辑：等待role存入后再执行判断和跳转
          if (sessionStorage.getItem("role") === "Admin") {
            console.log("Admin");
            this.props.navigate("/employees");
          }
          if (sessionStorage.getItem("role") === "User") {
            console.log("User");
            this.props.navigate("/add-employee");
          }
        });
      },
      (error) => {
        const resMessage =
          (error.response &&
            error.response.data &&
            error.response.data.message) ||
          error.message ||
          error.toString();
        alert(resMessage);
      }
    );
    event.preventDefault();
  }
}

修改后的RegisterComponent.js（修复嵌套state更新） #

class RegisterUserComponent extends Component {
    constructor(props) {
      super(props)
    
      this.state ={
            userId:0,
            userName:'',
            password:'',
            role:{
                roleId:0,
                roleName:''
            }
        }
      this.changeHandler=this.changeHandler.bind(this);
    }
    // 修复嵌套字段更新逻辑
    changeHandler(event){
        const { name, value } = event.target;
        // 表单name需设为"role.roleId"或"role.roleName"格式
        if (name.includes('.')) {
            const [parent, child] = name.split('.');
            this.setState(prevState => ({
                [parent]: {
                    ...prevState[parent],
                    [child]: value
                }
            }));
        } else {
            this.setState({[name]: value});
        }
    }
    submitData=(event)=>{
        let userDet={
            userId:this.state.userId,
            userName:this.state.userName,
            password:this.state.password,
            role:{
                roleId:this.state.role.roleId,
                roleName:this.state.role.roleName
            }
        }
        console.log(userDet);
        axios.post('http://localhost:8087/auth/users',userDet);
        event.preventDefault();
        this.props.navigate("/")
    }
}

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