React와 함께 로그인을 처리하는 기본 방법

Question

나는 create-react-app를 사용하여 클라이언트 측 응용 프로그램에서 작업하고 있습니다. 응용 프로그램은 기본 양식으로 로그인 구성 요소를 렌더링하고 성공적인 로그인시 다른 구성 요소 (기본 응용 프로그램이됩니다)를로드하려고합니다.

에서는 로그인 구성 요소를 분리하고 제출 이벤트에서 다른 구성 요소를로드하는 간단한 방법을 알아 내려고하기 때문에 유효성 검사 및 로그인 논리가 문제가되지 않습니다.

class Login extends Component { 

    handleLogin(){ 
     // trigger to load Main.js 
    } 

    render() { 
     return (
      // form elements here 

      <div className="submit"> 
       <input className="button-signin" value="Sign In" type="submit" 
        onClick={this.handleLogin}/> 
       </div> 
      ); 
    } 
} 

것은 무엇 이벤트 제출에 (I이 예에서는 Main.js라고) 다른 구성 요소로 전환하는 가장 쉬운 방법이 될 것입니다?

Answer 1

React router을 사용해 보셨습니까? 경로를 정의하고 각각에 구성 요소를 할당하는 것이 정말 쉽습니다. 그런 다음 각 경로에 액세스하기위한 조건을 설정할 수도 있습니다. There is an example in the official docs 귀하의 요구 사항과 일치하는 것 같습니다.

<Router history={withExampleBasename(browserHistory, __dirname)}> 
<Route path="/" component={App}> 
    <Route path="login" component={Login} /> 
    <Route path="logout" component={Logout} /> 
    <Route path="about" component={About} /> 
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
</Route> 

방법 requireAuth은 (구성 요소 Dashboard 표시됩니다) 경로 dashboard을 사용할 때마다 확인됩니다. 토큰 기반 인증을 사용하는 경우 localStorage에 토큰을 저장하고이 토큰이 requireAuth에 있는지 확인하십시오.

handleLogin 귀하의 방법 handleLogin은 백엔드를 호출하고 로그인을 처리하는 경우 사용자를 로그인 (localStorage에 토큰을 저장) 한 다음 대시 보드 경로로 리디렉션합니다.