Реагировать после входа в систему, загрузить другой файл и закрыть текущий файл

Question

Если пользователю удается войти в систему. Я хочу закрыть класс Login и открыть другой класс Servicedesk.

Я подумал, что если вы сможете просто вернуться и закрыть Вход, какой лучший способ сделать это?

<Servicedesk/>

Это мой код:

    import React from 'react'; 
    import Servicedesk from '../servicedesk/Servicedesk';

    class Login extends Component {
    constructor(props){
    super(props);
    function login(username, email){
    // This function is invoked if a user successfully logged in
     document.getElementById('Login').classList.add('setHidden');            
     document.getElementById('Login').classList.remove('setVisible');
     sessionStorage.setItem('loginSessionUsername', username);
     sessionStorage.setItem('loginSessionEmail', email);
    }
    render(){
    return(
            <div id='Login' className='setVisible'>
                <div>
                    <label>Emailadres</label>
                    <input type='text' placeholder='je email' onChange={ev => this.setState({email: ev.target.value})}/>
                    <label>Wachtwoord</label>
                    <input type='password' placeholder='je wachtwoord' onChange={ev => this.setState({password: ev.target.value})}/>
                    <br />
                    <button onClick={(event => this.handleClick(event))}>Submit</button>
                </div>
            </div>
        )
    }
}

export default Login;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

Используйте пользовательский флаг isAuthenticated в состоянии вашего приложения.Как только пользователь успешно вошел в систему, вы можете установить флаг isAuthenticated как true.

Проверьте флаг isAuthenticated перед рендерингом компонента.Это решит ваш.

    import React, { Component } from 'react';        
    import Servicedesk from '../servicedesk/Servicedesk'  //path for Servicedesk component
    class App extends Component{
      constructor(props){
        super(props);
        this.state={
          isAuthenticated: false,
          email: null,
          password: null
        }
      }

      login(){
        // make an api call to check whether the username and password is valid
        // checks user name and password
        // if true, then set state of isAuthenticated flag
        this.setState({ isAuthenticated: true});
        // after setting the isAuthenticated flag as true, then it will re-render the component
      }

      render(){
         const isAuthenticated = this.state.isAuthentiated;
         if(isAuthenticated){
           return(
             <div>
               <Servicedesk/>
             </div>
           )
         }

         return(
            <div>
              <div id='Login' className='setVisible'>
              <div>
                <label>Emailadres</label>
                <input type='text' placeholder='je email' onChange={ev => this.setState({email: ev.target.value})}/>
                <label>Wachtwoord</label>
                <input type='password' placeholder='je wachtwoord' onChange={ev => this.setState({password: ev.target.value})}/>
                <br />
                <button onClick={() => this.login.bind(this)}>Submit</button>
              </div>
              </div>
            </div>
         )
      }
    }
    export default App;

или используйте реагирующий маршрутизатор реактивный маршрутизатор

    import React from "react";
    import { render } from "react-dom";
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    import Home from "./Home";
    import About from "./About";
    import Contact from "./Contact";
    import Back from "./Back";
    import createHistory from "history/createBrowserHistory"

    const history = createHistory();
    const supportsHistory = 'pushState' in window.history

    const styles = {
      fontFamily: "sans-serif",
      textAlign: "left"
    };

    const App = () => (
      <div style={styles}>
        <Router forceRefresh={!supportsHistory}>
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>

          <hr />

          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />

          <Back />
        </div>
      </Router>
    </div>
  );

  render(<App />, document.getElementById("root"));