reactjs - 使用 Reactjs + Electron 最简单的流认证（无需任何特殊服务）

Question

我正在尝试使用非常简单的身份验证（表单+个人后端）创建一个桌面应用程序（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;

感谢您的帮助和耐心。

标签： reactjsauthenticationreact-routerelectron