im-sprint-auth-session-client

      ✓ props에 userData 객체가 존재해야 합니다.

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

const endPoint = 'https://localhost:4000/users/logout'

function Mypage(props) {
  const handleLogout = () => {
    // TODO: 서버에 로그아웃 요청을 보낸다음 요청이 성공하면 props.logoutHandler를 호출하여 로그인 상태를 업데이트 해야 합니다.
    //       ✓ 로그아웃 버튼이 클릭된 경우, POST `/users/logout` 요청을 보내야합니다.
        // 로그아웃 요청이 성공한 이후, logoutHandler 함수가 호출되어야 합니다

    axios
      .post(endPoint, null, {
        'Content-Type': 'application/json',
        withCredentials: true,
      })
      .then(() => props.logoutHandler())
      .catch(err => console(err))
    // TODO: 서버에 로그아웃 요청을 보낸다음 요청이 성공하면 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>
          {/*       ✓ props에 userData 객체가 존재해야 합니다 */}
          안녕하세요. <span className="name">{props.userData.userId}</span>님!
          로그인이 완료되었습니다.
        </div>
        <br />
        {/*       ✓ props에 userData 객체가 존재해야 합니다 */}
        <div className="item">나의 유저 네임: {props.userData.username}</div>
        <div className="item">나의 이메일 주소: {props.userData.email}</div>
      </div>
    </div>
  )
}

export default Mypage

 

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() {
    // TODO: 로그인 요청을 보내세요.
    //
    // 로그인에 성공하면
    // - props로 전달받은 함수를 호출해, 로그인 상태를 변경하세요.
    // - GET /users/userinfo 를 통해 사용자 정보를 요청하세요
    //
    // 사용자 정보를 받아온 후
    // - props로 전달받은 함수를 호출해, 사용자 정보를 변경하세요.
    axios
      // 로그인 버튼이 클릭된경우, POST `/login` 요청을 보내야 합니다
      .post(
        'https://localhost:4000/users/login',
        { userId: this.state.username, password: this.state.password },
        { 'Content-Type': 'application/json', withCredentials: true }
      ) // 옵션 설정
      .then(res => {
        // 로그인에 성공한 경우, `loginHandler` 함수가 호출되어야 합니다
        this.props.loginHandler()
        // 로그인 이후 GET `/users/userinfo` 요청을 통해 유저정보를 받아와야 합니다
        return axios.get('https://localhost:4000/users/userinfo', {
          withCredentials: true,
        })
      })
      .then(res => {
        let { userId, email } = res.data.data
        // 성공적으로 GET `/users/userinfo`요청이 완료된 이후, `setUserInfo` 함수가 실행되어야 합니다
        this.props.setUserInfo({
          userId,
          email,
        })
      })
      .catch(err => console(err))
  }

  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