Как выполнять Auth действия с Ioni c 4 React с Rails - PullRequest
Новая
       7

Как выполнять Auth действия с Ioni c 4 React с Rails

2 голосов
/ 02 февраля 2020

Я на хакатоне и пытаюсь использовать Ioni c 4 (реагировать), который я никогда раньше не использовал, для подключения к созданной мной базе данных Rails (аутентификация выполняется на сервере), размещенной на heroku. , Мне просто нужно подключить к нему действия auth на внешнем интерфейсе, и я сталкиваюсь с таким количеством проблем, и все, что я нахожу для ответов, находится в Angular Ioni c, а не в React Ioni c.

Приложение очень простое и на самом деле просто состоит из 4 основных страниц, одна из которых является стартовой страницей, одна - страницей ресурсов, одна - домашней страницей, а другая - страницей входа. Страница входа будет иметь кнопку регистрации и входа (если не аутентифицирована), а также сменить пароль и выйти (при аутентификации). У меня есть отдельные страницы для входа, регистрации и смены пароля. Я посмотрел в документах примеры и не нашел ни одного, есть ли какой-нибудь пример, который я мог бы go использовать для чего-то похожего / как мне go узнать, как это сделать? Любой вклад очень полезен, спасибо!

Пока это то, что у меня есть мусор, в основном взятый из: 

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>
    </>
    )
  }
}
...