ReactLaravel身份验证登录

时间:2018-09-27 06:43:10

标签: reactjs laravel

我将开始使用React Js Framework(SPA)编写Laravel Project。

我现在在登录页面上,并且停止编码,因为我不知道如何在ReactJS框架中使用laravel身份验证。

问题。

  1. 如何在reactJS中使用laravel框架的身份验证?
  2. 是否可以将laravel的身份验证连接到reactJS?

我的方法:

constructor(props) {
    super(props);
    this.state = {
        email: '',
        password: ''
    }

    this.change = this.change.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

onchangePassword(e) {
    this.setState({
        [e.target.name]: e.target.value
    })
}

onchangeUsername(e) {
    this.setState({
    })
}

handleSubmit(e) {
    e.preventDefault();
}

我的JSX:

render() {
    return (

        <div>
            <div className="header">
                <div className="jumbotron">
                    <h1>Login</h1>
                </div>
            </div>
            <div className="container">
            <form onSubmit={this.handleSubmit}>
            <br></br><br></br>
                <div className="row">
                    <div className="col-md-3"></div>
                    <div className="col-md-6">
                    <div className="form-group">
                        <label htmlFor="exampleInputEmail1">Email address</label>
                        <input type="email"
                            name="email" 
                            onChange={this.change}
                            value={this.state.email}
                            className="form-control" 
                            id="exampleInputEmail1" 
                            aria-describedby="emailHelp"
                            placeholder="Enter email"/>

                        <small id="emailHelp" 
                            className="form-text text-muted">

                            We'll never share your email with anyone else.
                        </small>
                    </div>
                    <div className="form-group">
                        <label htmlFor="exampleInputPassword1">Password</label>
                        <input 
                            type="password" 
                            name="password"
                            onChange={this.change}
                            className="form-control" 
                            id="exampleInputPassword1" 
                            value={this.state.password}
                            placeholder="Password"/>
                    </div>
                    <div className="form-check">
                        <input type="checkbox" className="form-check-input" id="exampleCheck1"/>
                        <label className="form-check-label" htmlFor="exampleCheck1">Check me out</label>
                    </div>
                    <br/>
                    <button type="submit" className="btn btn-outline-primary btn-lg">Submit</button>
                    </div>
                </div>
            </form>
            </div>
        </div>
    )
}

0 个答案:

没有答案