HTTPS - 세션 기반 인증 실습(Client)

App.js

import React, { Component } from 'react';

import Login from './components/Login';
import Mypage from './components/Mypage';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: false,
      userData: null,
    };
    this.loginHandler = this.loginHandler.bind(this);
    this.logoutHandler = this.logoutHandler.bind(this);
    this.setUserInfo = this.setUserInfo.bind(this);
  }

  loginHandler() {
    this.setState({
      isLogin: true,
    });
  }

  setUserInfo(object) {
    this.setState({ userData: object });
  }

  logoutHandler() {
    this.setState({
      isLogin: false,
    });
  }

  render() {
    const { isLogin } = this.state;
    return (
      <div className='App'>
        {isLogin ? (
          <Mypage
            logoutHandler={this.logoutHandler}
            userData={this.state.userData}
          />
        ) : (
            <Login
              loginHandler={this.loginHandler}
              setUserInfo={this.setUserInfo}
            />
          )}
      </div>
    );
  }
}

export default App;

Mypage는 props로 loginHandler함수와 userData state를 내려주고 있고, login에는 login함수와 setUserInfo 함수를 내려주고 있다. 각각의 함수는 setState로 state를 갱신해주고 있다.

Components/Mypage.js

import React from 'react';
import axios from 'axios';

const FILL_ME_IN = 'FILL_ME_IN';

function Mypage(props) {
  const handleLogout = () => {
    // 서버에 로그아웃 요청을 보낸다음 요청이 성공하면 props.logoutHandler를 호출하여 로그인 상태를 업데이트 
    axios({
      url : 'https://localhost:4000/users/logout',
      method : 'POST',
      headers : {withcredentials : true}
    })
    .then( () => {
      props.logoutHandler();
    })
  };
  return props.userData == null ? (
    <div>Loading...</div>
  ) : (
      <div>
        <div className='mypageContainer'>
          <div>
            <span className='title'>Mypage</span>
            <button className='logoutBtn' onClick={handleLogout}>
              logout
            </button>
          </div>
          <hr />

          <div>
            안녕하세요. <span className='name'>{props.userData.userId}</span>님! 로그인이 완료되었습니다.
          </div>
          <br />
          <div className='item'>
            나의 유저 네임: {props.userData.userId}
          </div>
          <div className='item'>
            나의 이메일 주소: {props.userData.email}
          </div>
        </div>
      </div>
    );
}

export default Mypage;

logout버튼이 있고, 버튼을 누르게 되면 handleLogout함수 실행, props로 state.userDate를 받고 있다.

Components/Login.js

import React, { Component } from 'react';
import axios from 'axios';

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };
    this.inputHandler = this.inputHandler.bind(this);
    this.loginRequestHandler = this.loginRequestHandler.bind(this);
  }

  inputHandler(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  loginRequestHandler() {
    axios( // 로그인에 성공
    {
      url : 'https://localhost:4000/users/login',
      method : 'POST',
      headers : {withcredentials : true},
      data : {
        userId : this.state.username,
        password : this.state.password
      }
    })
    .then( () => { // - props로 전달받은 함수를 호출해, 로그인 상태를 변경
      this.props.loginHandler();
      // - GET /users/userinfo 를 통해 사용자 정보를 요청
      axios( // 사용자 정보를 받아온 후
      {
        url : 'https://localhost:4000/users/userinfo',
        method : 'GET',
        headers : {withcredentials : true}
      })
      .then( (res) => { 
         // - props로 전달받은 함수를 호출해, 사용자 정보를 변경
        this.props.setUserInfo(res.data.data)
      })
    })
  }

  render() {
    return (
      <div className='loginContainer'>
        <div className='inputField'>
          <div>Username</div>
          <input
            name='username'
            onChange={(e) => this.inputHandler(e)}
            value={this.state.username}
            type='text'
          />
        </div>
        <div className='inputField'>
          <div>Password</div>
          <input
            name='password'
            onChange={(e) => this.inputHandler(e)}
            value={this.state.password}
            type='password'
          />
        </div>
        <div className='passwordField'>
          <button onClick={this.loginRequestHandler} className='loginBtn'>
            Login
          </button>
        </div>
      </div>
    );
  }
}

export default Login;

input태그가 있고, 이벤트 함수가 있는데 이 값은 setState로 갱신되며 state로 관리되고 있다.