使用 Reactjs + Electron 最简单的流程身份验证（无需任何特殊服务）

问题描述 投票：0回答：1

我正在尝试创建一个具有非常简单的身份验证（表单+个人后端）的桌面应用程序（Reactjs + Electron）。 但我不知道如何在我的身份验证页面和应用程序页面之间建立正确且安全的导航流程，并且我在互联网上找不到解决方案。

我是 ReactJS + Electron 的初学者，但目前，我可以在两种表单（登录和注册）之间导航，我需要帮助来验证这些表单并使用另一个路由器流导航到我的应用程序页面。

app.js（登录课堂）：

class SignInClic extends React.Component {
 get show() {
  return this.props.activeSection === "SignIn";
 }

 render() {
  if (this.show) {
   return <SignIn/>;
  } else { 
   return null;}
  }
}

class SignIn extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   mail: '', pwd: ''
  };
  this.handleSubmit = this.handleSubmit.bind(this);
 }

 handleSubmit(event) {
  const { mail, pwd } = this.state;
  var details = {'email': mail, 'passwd': pwd };
  var formBody = [];

  for (var property in details) { 
    var encodedKey = encodeURIComponent(property);
    var encodedValue = encodeURIComponent(details[property]);
    formBody.push(encodedKey + "=" + encodedValue);
  }
  formBody = formBody.join("&");

  fetch('http://xxx.xx.xx.xxx:8083/connect', { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, body: formBody }).then(function(response) {
  if (response.status === 500 || response.status === 200) {
    return response.json()
  }
}).then(function(object) {
  console.log('login success')
})

}
render() {
return (
  <div className="masterBox">
    <div className="slaveBox SignIn">
      <form onSubmit={this.handleSubmit}>
        <img src={logo} alt="logo"/>
        <h1>Project</h1>
        <input type="mail" name="mail" placeholder="email" required/>
        <input type="password" name="pwd" placeholder="Password" required/>
        <button type="submit">Sign-in</button>
      </form>
    </div>
  </div>
)
}}

app.js（注册课程）：

class SignUpClic extends React.Component {
  get show() {
   return this.props.activeSection === "SignUp";
  }

 render() {
  if (this.show) {
    return <SignUp/>;
  } else {
    return null;
  }}
 }

class SignUp extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
   mail01: '', mail02: '',
   pwd01: '', pwd02: '',
   lastName: '', license: ''
 };
this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event) {
const { mail01, mail02, pwd01, pwd02, lastName } = this.state;

if (mail01 && pwd01 && mail01 === mail02 && pwd01 === pwd02) {
  var details = {'email': mail01, 'passwd': pwd01, 'lastname': lastName };
  var formBody = [];
  for (var property in details) {
    var encodedKey = encodeURIComponent(property);
    var encodedValue = encodeURIComponent(details[property]);
      formBody.push(encodedKey + "=" + encodedValue);
    }
    formBody = formBody.join("&");

    fetch('http://xxx.xx.xx.xxx:8083/register', { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, body: formBody }).then(function(response) {
      if (response.status === 500 || response.status === 200) {
        return response.json()
      }
    }).then(function(object) {
      console.log('subscription success')
  })
} else if (!mail01 || !mail02 || mail01 !== mail02) {
  console.log('Error : Email looks wrong')
} else if (!pwd01 || !pwd02 || pwd01 !== pwd02) {
  console.log('Error : Pwd looks wrong')
} else {
  console.log('Error : Unknown')
}

}
render() {
return (
  <div className="masterBox">
    <div className="slaveBox SignUp">
      <form onSubmit={this.handleSubmit}>
        <img src={logo} alt="logo"/>
        <h1>Project</h1>
        <input type="mail" name="mail01" placeholder="Your email" required/>
        <input type="mail" name="mail02" placeholder="Same email" required/>
        <input type="password" name="pwd01" placeholder="Your Password" required/>
        <input type="password" name="pwd02" placeholder="Same Password" required/>
        <input type="text" name="lastName" placeholder="Last Name" required/>
        <input type="text" name="license" placeholder="License number (if purchased)" title="XXXX-XXXX-XXXX"/>
        <button type="submit">Sign-up</button>
      </form>
    </div>
  </div>
)
}}

app.js（路由）：

 const Main = ({ activeSection }) => (
  <React.Fragment>
   <SignInClic activeSection={activeSection} />
   <SignUpClic activeSection={activeSection} />
  </React.Fragment>
 ); 

 const MainOptions = ({ onToggle }) => (
   <div className="MainOptions">
     <button name="SignUp" onClick={onToggle}>Sign-up</button>
     <button name="SignIn" onClick={onToggle}>Sign-in</button>
   </div>
  );

  class App extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      activeSection: "SignIn"
    };

    this.handleToggleSection = this.handleToggleSection.bind(this);
  }

  handleToggleSection(e) {
   const { name } = e.target;
   this.setState(() => ({
    activeSection: name
   }));
   }

   render() {
return (
  <div className="App">
    <MainOptions onToggle={this.handleToggleSection} />
    <Main activeSection={this.state.activeSection} />
  </div>
);
}}
export default App;

感谢您的帮助和耐心。

reactjs authentication react-router electron
1个回答
0
投票
    import React, { Component } from 'react';

class Equipo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Equipe: { id: '', nom: '', listeJoueur: [] },
      Joueur: { id_joueur: '', nom_joueur: '', prenom_joueur:'', num_maillot: '', age:''  },
      listeEquipe: [],
      ajouterJr: false,
      selectedEquipeIndex: null,
      equipeIndex: null,
      joueurIndex: null,
      modifierEquipe: false,
      modifierJoueur: false,
    };
  }

  getValue = (event) => {
    const { name, value } = event.target;
    if (this.state.ajouterJr) {
      this.setState({
        Joueur: { ...this.state.Joueur, [name]: value },
      });
    } else {
      this.setState({
        Equipe: { ...this.state.Equipe, [name]: value },
      });
    }
  };

  isUniqueEquipe = (id, nom) => {
    return !this.state.listeEquipe.some(
      (equipe) => equipe.id === id || equipe.nom === nom
    );
  };

  isUniqueJoueur = (id_joueur, nom_joueur, prenom_joueur) => {
    const { selectedEquipeIndex, listeEquipe } = this.state;
    const selectedEquipe = listeEquipe[selectedEquipeIndex];
    return !selectedEquipe.listeJoueur.some(
      (joueur) => joueur.id_joueur === id_joueur || joueur.nom_joueur === nom_joueur || joueur.prenom_joueur === prenom_joueur 
    );
  };

  ajouterEquipe = () => {
    const { Equipe, listeEquipe, modifierEquipe, equipeIndex } = this.state;
    const { id, nom } = Equipe;

    if (id.trim() && nom.trim()) {
      if (!this.isUniqueEquipe(id, nom) && !modifierEquipe) {
        alert('Equipe ID or Nom already exists!');
        return;
      }

      if (modifierEquipe) {
        const updatedEquipe = [...listeEquipe];
        updatedEquipe[equipeIndex] = Equipe;
        this.setState({
          listeEquipe: updatedEquipe,
          Equipe: { id: '', nom: '', listeJoueur: [] },
          modifierEquipe: false,
          equipeIndex: null,
        });
      } else {
        this.setState((prevState) => ({
          listeEquipe: [...prevState.listeEquipe, prevState.Equipe],
          Equipe: { id: '', nom: '', listeJoueur: [] },
        }));
      }
    }
  };

  ajouterJoueur = () => {
    const { Joueur, listeEquipe, selectedEquipeIndex, modifierJoueur, joueurIndex } = this.state;
    const { id_joueur } = Joueur;
    const selectedEquipe = listeEquipe[selectedEquipeIndex];

    if (id_joueur.trim()) {
      if (!this.isUniqueJoueur(id_joueur) && !modifierJoueur) {
        alert('Joueur ID or Nom already exists in the team!');
        return;
      }

      if (modifierJoueur) {
        selectedEquipe.listeJoueur[joueurIndex] = Joueur;
      } else {
        selectedEquipe.listeJoueur.push(Joueur);
      }

      listeEquipe[selectedEquipeIndex] = selectedEquipe;

      this.setState({
        listeEquipe,
        Joueur: { id_joueur: '', nom_joueur: '' , prenom_joueur:'' , num_maillot: '', age:''},
        ajouterJr: false,
        modifierJoueur: false,
        joueurIndex: null,
      });
    }
  };

  selectEquipeForJoueur = (index) => {
    this.setState({
      selectedEquipeIndex: index,
      ajouterJr: true,
      Joueur: { id_joueur: '', nom_joueur: '' , prenom_joueur:'' , num_maillot: '', age:'' },
      modifierJoueur: false,
    });
  };

  supprimerEquipe = (index) => {
    const updateEquipe = [...this.state.listeEquipe];
    updateEquipe.splice(index, 1);
    this.setState({
      listeEquipe: updateEquipe,
    });
  };

  supprimerJoueur = (equipeIndex, joueurIndex) => {
    const updateEquipe = [...this.state.listeEquipe];
    const selectedEquipe = updateEquipe[equipeIndex];
    selectedEquipe.listeJoueur.splice(joueurIndex, 1);
    this.setState({
      listeEquipe: updateEquipe,
    });
  };

  afficherEquipe = (index) => {
    const equipeToModify = this.state.listeEquipe[index];
    this.setState({
      Equipe: equipeToModify,
      modifierEquipe: true,
      equipeIndex: index,
    });
  };

  afficherJoueur = (equipeIndex, joueurIndex) => {
    const joueurToModify = this.state.listeEquipe[equipeIndex].listeJoueur[joueurIndex];
    this.setState({
      Joueur: joueurToModify,
      modifierJoueur: true,
      joueurIndex: joueurIndex,
      selectedEquipeIndex: equipeIndex,
      ajouterJr: true,
    });
  };

  render() {
    return (
      <div>
      <div>
        
      </div>
      <div>
        <table>
          <tbody>
            <tr>
              <td>ID {this.state.ajouterJr ? 'Joueur' : 'Equipe'}</td>
              <td>
                <input type="text" name={this.state.ajouterJr ? 'id_joueur' : 'id'} value={this.state.ajouterJr ? this.state.Joueur.id_joueur : this.state.Equipe.id} onChange={this.getValue}/>
              </td>
            </tr>
            <tr>
              <td>Nom {this.state.ajouterJr ? 'Joueur' : 'Equipe'}</td>
              <td>
                <input type="text" name={this.state.ajouterJr ? 'nom_joueur' : 'nom'} value={this.state.ajouterJr ? this.state.Joueur.nom_joueur : this.state.Equipe.nom} onChange={this.getValue}/>
              </td>
            </tr>
            <tr>
            <td>{this.state.ajouterJr ? 'Prenom Joueur' : null}</td>
            {this.state.ajouterJr ?
            <td> <input type="text" name={this.state.ajouterJr ? 'prenom_joueur' : null} /> </td> : null}
            </tr>
            <tr>
            <td>{this.state.ajouterJr ? 'Numéro du maillot' : null}</td>
            {this.state.ajouterJr ?
            <td> <input type="text" name={this.state.ajouterJr ? 'num_maillot' : null} /> </td> : null}
            </tr>
            <tr>
            <td>{this.state.ajouterJr ? 'Age du joueur' : null}</td>
            {this.state.ajouterJr ?
            <td> <input type="text" name={this.state.ajouterJr ? 'age' : null} /> </td> : null}
            </tr>
            <tr>
              <td></td>
              <td>
                <button onClick={this.state.ajouterJr ? this.ajouterJoueur : this.ajouterEquipe}>{this.state.modifierEquipe || this.state.modifierJoueur ? 'Modifier' : 'Ajouter'}</button>
              </td>
            </tr>
          </tbody>
        </table>

        <b>Liste des Equipes</b>
        <table border="1">
          <thead>
            <tr>
              <th>Id</th>
              <th>Nom</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {this.state.listeEquipe.map((equipe, index) => (
              <tr key={index}>
                <td>{equipe.id}</td>
                <td>{equipe.nom}</td>
                <td>
                  <button onClick={() => this.supprimerEquipe(index)}>Supprimer</button>
                  <button onClick={() => this.afficherEquipe(index)}>Modifier</button>
                  <button onClick={() => this.selectEquipeForJoueur(index)}>Ajouter Joueur</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

        <b>Liste des Joueurs</b>
        <table border="1">
          <thead>
            <tr>
              <th>ID Joueur</th>
              <th>Nom Joueur</th>
              <th>Nom Equipe</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {this.state.listeEquipe.map((equipe, equipeIndex) => (
              equipe.listeJoueur.map((jr, joueurIndex) => (
                <tr key={joueurIndex}>
                  <td>{jr.id_joueur}</td>
                  <td>{jr.nom_joueur}</td>
                  <td>{equipe.nom}</td>
                  <td>
                    <button onClick={() => this.supprimerJoueur(equipeIndex, joueurIndex)}>Supprimer</button>
                    <button onClick={() => this.afficherJoueur(equipeIndex, joueurIndex)}>Modifier</button>
                  </td>
                </tr>
              ))
            ))}
          </tbody>
        </table>
        </div>
      </div>
    );
  }
}

export default Equipo;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.