reactjs中的登錄頁面驗證

Question

我想將 angularjs 登錄頁面轉換為 reactjs。 我做了代碼，但我想知道這是否是正確的方法，以及在我完成之前它是否正確。 另外我想添加只能通過身份驗證訪問的儀表板頁面，用戶登錄后將被重定向到儀表板。

$scope.login=function(){
    $scope.newuser={
        'password':$scope.signinpassword,
        'email':$scope.emailid
    }
   return $http.post('/api/authenticate',$scope.newuser).then(function(response,status){
        if(response.data=='redirect'){
            $window.location.href="/dashboard";                        
        }else if(response.data=='verifyemail'){
            angular.element(document.querySelector('#verifyemailbtn')).click();                
        }else if(response.data=='Invalid Password'){
            window.alert("Incorrect Password");
            $scope.error='Failed to authenticate'
        }       
   });
}

我到目前為止翻譯的 reactjs 代碼

class Login extends Component {
constructor(props){
  super(props);
  this.state={
  emailid:'',
  password:''
  }
 }
performLogin = async (event) => {
    var body={
        "emailid":"this.state.emailid",
        "password":"this.state.password"
        }
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      },
      body: body
    };
    const url = "api/login";
    try {
      const response = await fetch(url, options);
      const result = await response.json();
      console.log(`login successful`);
    } catch (error) {
      console.error("login credentials wrong");
    }
  };

render() {
    return (
      <div>
             <input type="text"
             placeholder="emailid"
             onChange = {(event,newValue) => this.setState({emailid:newValue})}
             />
            <br/>
             <input
               type="password"
               placeholder="Enter your Password"
               onChange = {(event,newValue) => this.setState({password:newValue})}
              />
            <br/>
             <button type="submit" onClick={(event) => this.performLogin(event)}/>
      </div>
    );
  }
}
export default Login;   

Answer 1

您的代碼接近沒問題，但有一些語法問題。

1-您需要為構造函數中的方法綁定“this”

2- 在此.state.emailid 的 performLogin 中刪除雙引號

3-您不需要為每個輸入提供很多功能，您只需使用這樣的一個功能即可處理所有輸入領域。

我重構你的代碼:-)

 class Login extends Component { constructor(props){ super(props); this.performLogin = this.performLogin.bind(this) this.handleChange = this.handleChange.bind(this) this.state={ emailid:'', password:'' } } performLogin = async (event) => { const { enteredText } = this.state; var body={ "emailid":this.state.emailid, "password":this.state.password } const options = { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: body }; const url = "api/login"; try { const response = await fetch(url, options); const result = await response.json(); $window.location.href="/dashboard"; } catch (error) { console.error("login credentials wrong"); } }; handleChange(e) { this.setState({[e.target.name]:e.target.value}) } render() { return ( <div> <input type="text" placeholder="emailid" onChange = {handleChange} /> <br/> <input type="password" placeholder="Enter your Password" onChange = {handleChange} /> <br/> <button type="submit" onClick={this.performLogin}/> </div> ); } } export default Login;

對於重定向，您可以使用像React-Router 這樣的庫，或者只是用 $window.location.href="/dashboard" 替換 console.log( login successful success )