2

我正在参加一个黑客马拉松，并尝试使用我以前从未使用过的 Ionic 4 (react) 连接到我制作的 Rails 数据库（在后端完成身份验证），该数据库托管在 heroku 上。我真的只需要在前端将身份验证操作连接到它，我遇到了很多问题，我找到的所有答案都在 Angular Ionic 中，而不是在 React Ionic 中。

该应用程序非常简单，实际上只包含 4 个主页面，一个是起始页，一个是资源页面，一个是主页，另一个是登录页面。登录页面将有一个注册和登录按钮（未通过身份验证时）和更改密码并退出（通过身份验证时）。我有单独的页面用于登录、注册和更改密码。我在文档中查看了示例，但没有找到，有没有我可以使用类似的示例/我该如何学习如何做到这一点？任何输入都非常有帮助，谢谢！

到目前为止，这就是我所拥有的垃圾，主要来自：

import { IonContent, IonHeader, IonItem, IonLabel, IonList, IonPage, IonTitle, IonToolbar } from '@ionic/react';

// updateUserName = (event: any) => {
//   this.setState({ username: event.detail.value });
// };
const SignIn: React.FC = () => {
  login= () => {
    let url , credentials;
    if(this.state.action  == 'Login'){
      url = CONFIG.API_ENDPOINT + '/users/login';
      credentials = {
        "user": {
          "email": this.state.email,
          "password": this.state.password
        }
      }
    } else {
      url = CONFIG.API_ENDPOINT + '/users';
      credentials = {
        "user": {
          "email": this.state.email,
          "password": this.state.password,
          "username": this.state.username
        }
      }
    }
    fetch(url, {
      method: 'POST',
      headers: {
          "Content-Type": "application/json",
      },
      body: JSON.stringify(credentials)
    })
    .then((res) => {
      console.log(res);
      if(res.status == 200){
        return res.json();
      } else {
        if(this.state.action == 'SignUp') {
          throw new Error("Error creating user");
        } else {
          throw new Error("Error Logging in")
        }
      }

    } )
    .then(
      (result) => {
          console.log(result);
          localStorage.setItem("token",result.user.token);
          localStorage.setItem("username", result.user.username);
          localStorage.setItem("isLogin", "true");
          localStorage.setItem("email", result.user.email);

          this.event = new CustomEvent('loggedIn', {
            detail: true
          });
          window.dispatchEvent(this.event);
      },

      (error) => {
       console.error(error);
       this.setState({toastMessage: error.toString(), toastState: true});
      }
    )
  };

  render() {
    return(
      <IonHeader title="Login">Sign</IonHeader>
      <IonContent padding>
        <div className="ion-text-center">
          <img src={image} alt="logo" width="25%" />
        </div>
        <h1 className="ion-text-center conduit-title">conduit</h1>
        <IonToast
            isOpen={this.state.toastState}
            onDidDismiss={() => this.setState(() => ({ toastState: false }))}
            message= {this.state.toastMessage}
            duration={400}
          >
        </IonToast>
        <form action="">
          <IonItem>
            <IonInput  onIonChange={this.updateEmail} type="email" placeholder="Email"></IonInput>
          </IonItem>
          {this.state.action === 'SignUp' ?
            <IonItem>
              <IonInput onIonChange={this.updateUserName} type="text" placeholder="Username"></IonInput>
            </IonItem>
            : <></>
          }
          <IonItem>
            <IonInput onIonChange={this.updatePassword} type="password" placeholder="Password"></IonInput>
          </IonItem>
        </form>
        <IonButton onClick={this.login}>{this.state.action}</IonButton>
      </IonContent>
      <IonFooter>
        <IonToolbar text-center>
            Click here to <a onClick={this.toggleAction}>{this.state.action === 'Login'? 'SignUp' : 'Login'}</a>
        </IonToolbar>
      </IonFooter>
    </>
    )
  }
}
4

0 回答 0