html - 反应 JS 身份验证

Question

我是反应 js 的新手。我无法理解如何使用商店。谁能帮助我创建登录和处理重定向的基本方法？我正在创建一个简单的 2 页应用程序。如果他没有被授权，我希望用户重定向到登录页面。另外，如果有人有关于反应 js 的好教程的链接，请分享。

index.js

            import React, { Component } from 'react'
            import ReactDOM from 'react-dom';
            import './index.css';

            strong text
            import Create from "./components/createshipment";
            import App from './App';

            import {BrowserRouter as Router} from 'react-router-dom';
            import {Switch, Redirect} from 'react-router-dom';
            import Route from 'react-router-dom/Route';
            import registerServiceWorker from './registerServiceWorker';


            ReactDOM.render(

              <Router>
                <div className="App">
                  <Switch>
                <Route path="/login"  exact strict component={App} />
                <Route path="/cs"  component={Create} />


                </Switch >
                </div>
              </Router>,

              document.getElementById('root')
            );

            registerServiceWorker();

应用程序.js

            import React, { Component } from 'react';
            import Login from "./components/login";



            import "./components/App.css";

            class App extends Component {
              constructor(props){
                super(props);
                // this.onHandle = this.onHandle.bind(this);
              }

               state={
                 logged:false,
               }
              onHandle =(e)=>{
                return this.setState({ logged: e});
              }
              render() {
                return (
                  <div >
                <Login logged={this.state.logged} onHandle={e=>this.onHandle(e)} />

                  </div>
                );
              }
            }

            export default App;

登录.js

            import React, { Component } from 'react';
            import './App.css';
            // import er from "./error.png";
            import Create from "./createshipment";


            import { Route, Link, Switch, Redirect } from 'react-router-dom';


            class Login extends React.Component {
              constructor(props) {
                super(props);

                this.onChange = this.onChange.bind(this);
                this.onSubmit = this.onSubmit.bind(this);
              }

              state={
                username:"",
                password:"",
                flag: false,
                showResults:false,
              }

              isLoggedIn(){
                // console.log(Login.flag);
                return this.state.flag;
              }


              onChange =(e)=>{
                return this.setState({
                  [e.target.name]: e.target.value,
                });
              }



              onSubmit = async (event) =>{

                // debugger;
                event.preventDefault();


                 const { username, password,flag} = this.state;

                 this.setState({ flag: false });



                 if (!(username === 'george' && password === 'george')) {

                   this.username="";
                   this.password="";

                   alert('Invalid username/password');

                   return false;
                 }

                 else{
                  console.log("abc")

                  this.props.onHandle(true);


                  return true;
               }
             }
              render() {


                if (this.props.logged === true) {

                return <Redirect to='/cs'/>
                }

                // <div className="errormain">
                //    { this.state.showResults ? <label className="ErrorMsg"> Invalid Login Details</label>  : null }
                // </div>

                return (

                  <div className="App">
                <form className="frame" >
                  <h1 className="App-title">ALPHA</h1>
                  <h2 className="App-para"> Aid Tracking Portal</h2>


                  <br/><br/> <br/>
                  <br/><br/><br/>
                  <br/><br/><br/> <br/>
                  <br/><br/>


                  <input required="required" placeholder= "Username" className="lmain" name="username" placeholders='Email'  onChange={e=> this.onChange(e)} value={this.state.username}/>
                  <br/>
                  <input type="text" required placeholder= "Password"  className="lmain" name="password" placeholders='Password' type='password' onChange={e=> this.onChange(e)} value={this.state.password}/>
                  <button className="LB" value="true" onClick={this.onSubmit} > Login</button>
                </form>
                  </div>

                );
              }
            }


             export default Login

CreateShipment.js

            import React, { Component } from 'react';
            // import logo from '/home/zubair/Desktop/projectmanager/src/logo.svg';
            import NewShipment from './form/NewShipment.js';
            import Navigation from './navigation';
            import './form/createshipment.css';

            class Createshipment extends React.Component {
              constructor(props){
                super(props);
              }


              render() {



                 return (

                  <div >
                <header className="App-header">
                  <h1 className="App-title2">Aid Tracker</h1>
                  <Navigation/>
                </header>
                <br/><br/>
                <NewShipment />
                  </div>
                );
              }
            }


            export default Createshipment;

标签： htmlreactjsweb

Answer 1

在 web 上你可以使用 LocalStorage 来存储数据。如果你打算使用 Redux，那么我建议 github.com/rt2zz/redux-persist。