IM-SPRINT-AUTH-TOKEN, JWT를 이용한 프로그램 구현. (client-token)

IM-SPRINT-AUTH-TOKEN, JWT를 이용한 프로그램 구현. (server-token)

server 를 완료하고 넘어 온 클라이언트 부분.

 

💡 client-token/src/component/Login.js

 

* Axios를 이용하여 구현. 

Axios란? 

(깊게 이해하고 싶다면 첨부된 링크 참고 -> https://axios-http.com/kr/docs/intro)

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP client 라이브러리이다. 서버 사이드에서는 node.js의 http 모듈을 사용하고 클라이언트(브라우저) 에서는 XMLHttpRequests를 사용한다.

 

*POST 요청 생성 예제

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

 

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

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userId: "",
            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: Login 컴포넌트가 가지고 있는 state를 이용해 로그인을 구현합니다.
    로그인을 담당하는 api endpoint에 요청을 보내고, 받은 데이터로 상위 컴포넌트 App의 state를 변경하세요.
    초기 App:
    state = { isLogin: false, accessToken: "" }
    로그인 요청 후 App:
    state = { isLogin: true, accessToken: 서버에_요청하여_받은_access_token }
    */
        axios
            .post("https://localhost:4000/login", {
                userId: this.state.userId,
                password: this.state.password,
            })
            .then((res) => {
                this.props.issueAccessToken(res.data.data.accessToken);
                this.props.loginHandler(res.data.data.accessToken);
            });
    }

    render() {
        return (
            <div className="loginContainer">
                <div className="inputField">
                    <div>Username</div>
                    <input
                        name="userId"
                        onChange={(e) => this.inputHandler(e)}
                        value={this.state.userId}
                        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="loginBtnContainer">
                    <button
                        onClick={this.loginRequestHandler}
                        className="loginBtn"
                    >
                        JWT Login
                    </button>
                </div>
            </div>
        );
    }
}

export default Login;

 

💡 client-token/src/component/MyPage.js

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

class Mypage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userId: "",
            email: "",
            createdAt: "",
        };
        this.accessTokenRequest = this.accessTokenRequest.bind(this);
        this.refreshTokenRequest = this.refreshTokenRequest.bind(this);
    }

    accessTokenRequest() {
        /* 
    TODO: 상위 컴포넌트인 App에서 받은 props를 이용해 accessTokenRequest 메소드를 구현합니다.
    access token을 처리할 수 있는 api endpoint에 요청을 보내고, 받은 데이터로 Mypage 컴포넌트의 state (userId, email, createdAt)를 변경하세요
    초기 Mypage:
    state = { userId: "", email: "", createdAt: "" }
    accessTokenRequest 후 Mypage:
    state = { userId: "특정유저id", email: "특정유저email", created: "특정유저createdAt" }
    
    ** 주의사항 **
    App 컴포넌트에서 내려받은 accessToken props를 authorization header에 담아 요청을 보내야 합니다. 
    */
        axios
            .get("https://localhost:4000/accesstokenrequest", {
                headers: { authorization: `Bearer ${this.props.accessToken}` },
            })
            .then((res) => {
                this.setState({
                    ...res.data.data.userInfo,
                });
            });
    }

    refreshTokenRequest() {
        /*
    TODO: 쿠키에 담겨져 있는 refreshToken을 이용하여 refreshTokenRequest 메소드를 구현합니다.
    refresh token을 처리할 수 있는 api endpoint에 요청을 보내고, 받은 데이터로 2가지를 구현합니다.
    1. Mypage 컴포넌트의 state(userId, email, createdAt)를 변경
    2. 상위 컴포넌트 App의 state에 accessToken을 받은 새 토큰으로 교환
    */
        axios.get("https://localhost:4000/refreshtokenrequest").then((res) => {
            this.setState({
                ...res.data.data.userInfo,
            });
            this.props.issueAccessToken(res.data.data.accessToken);
        });
    }

    render() {
        const { userId, email, createdAt } = this.state;
        return (
            <div className="mypageContainer">
                <div className="title">Mypage</div>
                <hr />
                <br />
                <br />
                <div>
                    안녕하세요.{" "}
                    <span className="name">{userId ? userId : "Guest"}</span>님!
                    jwt 로그인이 완료되었습니다.
                </div>
                <br />
                <br />
                <div className="item">
                    <span className="item">나의 이메일: </span> {email}
                </div>
                <div className="item">
                    <span className="item">나의 아이디 생성일: </span>{" "}
                    {createdAt}
                </div>
                <br />
                <br />
                <div className="btnContainer">
                    <button
                        className="tokenBtn red"
                        onClick={this.accessTokenRequest}
                    >
                        access token request
                    </button>
                    <button
                        className="tokenBtn navy"
                        onClick={this.refreshTokenRequest}
                    >
                        refresh token request
                    </button>
                </div>
            </div>
        );
    }
}

export default Mypage;