ReacJS를 루프백과 함께 사용하는 사용자 인증

Question

지금 약간의 프로젝트를 진행 중이며 루프백이있는 ReactJS를 사용하여 프런트 엔드에 대한 사용자 인증을 설정하려고합니다. 사용자에 대한 내 로그인보기가 있고 가입 한 다음 로그인 할 수 있지만 사용자가 로그인하지 않은 경우 응용 프로그램에있는 다른 페이지를 볼 수없는 위치로 이동하려고합니다. 나는 검색을 시도하고이 단계를 완료하는 방법에 대한 매우 슬림 한 문서를 발견했습니다. 겠습니까 나는 라우터에서 인증을 사용할 필요가, 어떻게 나는 그들이에 로그인 한 경우 페이지로 사용자를 리디렉션에 대한 갈 것이라고

import React from 'react'; 
import { Switch, Route } from 'react-router-dom'; 
import Carlist from './Carlist'; 
import About from './About'; 
import Contact from './contact'; 
import CarlistDetails from './CarlistDetails'; 
import Addnew from './Addnew'; 
import EditCar from './EditCar'; 
import Thanks from './Thanks'; 
import Login from "./Login"; 
import AddUsers from "./AddUsers"; 
const Main =() => (
    <main> 
    <Switch> 
     <Route exact path='/' component={Login} /> 
     <Route exact path='/home' component={Carlist} /> 
     <Route exact path='/about' component={About} /> 
     <Route exact path='/Thanks' component={Thanks} /> 
     <Route exact path='/contact' component={Contact} /> 
     <Route exact path='/AddUsers' component={AddUsers} /> 
     <Route exact path='/carlist/add' component={Addnew} /> 
     <Route exact path='/carlist/edit/:id' component={EditCar} /> 
     <Route exact path='/carlist/:id' component={CarlistDetails} /> 
    </Switch> 

    </main> 


) 

수출 기본 홈페이지를.;

import React, { Component } from 'react'; 
import axios from 'axios'; 
import { Link } from 'react-router-dom'; 

class Login extends Component { 

    submitUser(loginUser) { 
    axios.request({ 
     method: 'post', 
     url: 'http://localhost:3000/api/Users/login', 
     data: loginUser 
    }).then(response => { 
     this.props.history.push('/home'); 
    }).catch(err => console.log(err)); 
    } 

    onSubmit(e) { 
    const loginUser = { 
     email: this.refs.email.value, 
     password: this.refs.password.value, 
    } 
    this.submitUser(loginUser); 
    e.preventDefault(); 
    } 






    render() { 
    return (
     <div> 

     <h1>Login</h1> 
     <form onSubmit={this.onSubmit.bind(this)}> 
      <div className="input-field"> 
      <input type="text" name="email" ref="email" /> 
      <label htmlFor="email">Email</label> 
      </div> 
      <div className="input-field"> 
      <input type="text" name="password" ref="password" /> 
      <label htmlFor="password"> Password</label> 
      </div> 
      <input type="submit" value="Login" className="btn blue darken-3" /> 
      <Link className="btn right" to="/AddUsers">Create Account</Link> 
     </form> 
     </div> 
    ) 
    } 
} 
export default Login; 

Answer 1

상태가 필요합니다. 로그인 매개 변수.

state = {login: false} 

그런 다음 다른 경로는 로그인 만 true로 렌더링하십시오.

<Switch> 
    <Route exact path='/' component={Login} /> 
    {this.state.login && ...} 
</Switch>