首页 > 解决方案 > 反应Js | 根据登录输入从 API 取回用户 ID

问题描述

我有一个登录组件,用户可以使用电子邮件和密码登录。在数据库中,用户具有以下属性。

1.userID 2.Email 3.Password

我想根据用户登录从 API 取回用户 ID。有天才能帮我解决这个问题吗?

我的登录组件:

export default class Login extends Component {

    state = {};
    submitHandler = e => {
        e.preventDefault()

        const logingdata ={
            email : this .Email,
            password: this .Password
        }
           axios
           .post('/api/UserLogin', logingdata)

           .then(response => {
               console.log(response); //to print response in console in developper tool
               //const currentuser = JSON.parse(atob(response.data.token.split(".")[1])); 
               localStorage.setItem('login', response.data.token);
               console.log(this.email);
               
           })
           .catch(error => {
               console.log(error => console.log(error.response.data))
           })
    }

    render() {    
        return (
            <div className="outer">
            <div className="inner"> 
            <form onSubmit={ this.submitHandler}>

                <h3>Log in</h3>

                <div className="form-group">
                    <label>Email</label>
                    <input type="text" className="form-control" placeholder="Enter email" onChange ={ e => this.Email = e.target.value} />
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type="text" className="form-control" placeholder="Enter password" onChange ={ e => this.Password = e.target.value} />
                </div>

                <div className="form-group">
                    <div className="custom-control custom-checkbox">
                        <input type="checkbox" className="custom-control-input" id="customCheck1" />
                        <label className="custom-control-label" htmlFor="customCheck1">Remember me</label>
                    </div>
                </div>
                 
                
                
                <br></br>
                <button type="submit" className="btn btn-dark btn-lg btn-block">Sign in</button>
                <p className="forgot-password text-right">
                    Forgot <Link to= "/Forgotpassword" >password?</Link>
                </p>
            </form>
            </div>
            </div>
        );

    }
}

编辑:

控制台响应母鸡登录:(它只显示用户名和密码)

在此处输入图像描述

标签: javascriptreactjs

解决方案


推荐阅读