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 });
    // console.log(this.state.user.userName);
  }

  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).then((res) => {
          sessionStorage.setItem("role", res.data);
        });
        
        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

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){

        this.setState({[event.target.name]:event.target.value});
        // console.log(this.state.user.userName);
    }
    submitData=(event)=>{
        console.log(this.state.user);
        let userDet={
            userId:this.state.userId,
            userName:this.state.userName,
            password:this.state.password,
            role:{
                roleId:this.state.roleId,
                roleName:this.state.roleName
            }
        }
        console.log(userDet);
        // axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
        axios.post('http://localhost:8087/auth/users',userDet);
        event.preventDefault();
        this.props.navigate("/")
    }

I can able to register a user with role like admin,user.But when I login the registered user, I am getting a axios error as http://localhost:8087/auth/role/[object Object]/undefined. My token is storing in session storage but the role(key, value) is not storing. I have now added my register component. Kindly rectify

CodePudding user response：

Issue

getRole takes two arguments, userName and password

getRole(userName, password) {
  return axios.get(GET_AUTH_API_BASE_URL   "/role/"   userName   "/"   password);
}

but the UI is passing a single object

let userDet = {
  userName: this.state.userName,
  password: this.state.password,
};

...

AuthService.getRole(userDet)
  .then((res) => {
    sessionStorage.setItem("role", res.data);
  });

userName is an object and password is undefined in the getRole function.

Solution

Pass two args.

const { userName, password } = this.state;

...

AuthService.getRole(userName, password)
  .then((res) => {
    sessionStorage.setItem("role", res.data);
  });