🌗 The Art of React part3

⚡️ 프로젝트 정리

• JWT(JSON Web Token)을 이용하여 서버에 회원 인증 시스템을 구현해보는 프로젝트를 해보았습니다.
• 세선 기반 인증 시스템과 토큰 기반 인증 시스템 중 토큰 기반 인증 시스템을 사용하는데 이 시스템은 사용자 로그인 정보를 기억하는데 필요한 리소스가 적다는 장점을 가지고 있습니다.
• 그 외에 구현의 간편성과 사용자들의 인증 상태를 관리하기 편하다는 장점 또한 가지고 있습니다.
• JWT 토큰을 만들기 위하여 jsonwebtoken 모듈 설치가 필요합니다.
• 사용자가 토큰을 사용할 때 주로 브라우저의 localstorage 또는 sessionstorage에 보관하거나 브라우저의 쿠키에 담아서 사용합니다.
• 전자의 경우 XXS(Cross Site Scripting) 공격에 취약하며 후자의 경우, CSRF(Cross Site Request Forgery) 공격에 취약합니다.
• 이상으로 백엔드 파트는 마무리되었으며 리액트를 이용하여 블로그 웹 애플리케이션을 만들 예정입니다.

🎁 코드

//auth.ctrl.js
require('dotenv').config();
import Joi from "joi";
import User from "../../models/user"

export const register = async ctx => {

    const schema = Joi.object().keys({
        username: Joi.string().alphanum().min(3).max(20).required(),
        password: Joi.string().required()
    })
    const result = schema.validate(ctx.request.body);
    if (result.error) {
        ctx.status = 400;
        ctx.body = result.error;
        return;

    }
    const { username, password } = ctx.request.body;

    try {
        const exists = await User.findByUsername(username)
        if (exists) {
            ctx.status = 409
            return;
        }
        const user = new User({ username })
        await user.setPassword(password)
        await user.save();
        ctx.body = user.serialize();
        const token = user.generateToken();

        ctx.cookies.set("access_token", token, {
            maxAge: 1000 * 60 * 60 * 24 * 7, httpOnly: true
        })
    } catch (e) {
        ctx.throw(500, e)
    }//


}

export const login = async ctx => {
    const { username, password } = ctx.request.body;

    // username, password 가 없으면 에러 처리
    if (!username || !password) {
        ctx.status = 401; // Unauthorized
        return;
    }

    try {
        const user = await User.findByUsername(username);
        // 계정이 존재하지 않으면 에러 처리
        if (!user) {
            ctx.status = 401;
            return;
        }
        const valid = await user.checkPassword(password);
        // 잘못된 비밀번호
        if (!valid) {
            ctx.status = 401;
            return;
        }
        ctx.body = user.serialize();
        const token = user.generateToken();
        ctx.cookies.set('access_token', token, {
            maxAge: 1000 * 60 * 60 * 24 * 7, // 7일
            httpOnly: true,
        })
    } catch (e) {
        ctx.throw(500, e);
    }
}

export const check = async ctx => {
    const { user } = ctx.state;


    if (!user) {
        ctx.status = 401; // Unauthorized
        return;
    }

    ctx.body = user;

}

export const logout = async ctx => {
    ctx.cookies.set("access_token");
    ctx.status = 204;
}

//auth/index.js

import Router from 'koa-router';
import * as authCtrl from './auth.ctrl';

const auth = new Router();

auth.post('/register', authCtrl.register);
auth.post('/login', authCtrl.login);
auth.get('/check', authCtrl.check);
auth.post('/logout', authCtrl.logout);

export default auth;

//jwtMiddleware.js
require("dotenv").config()
import jwt from "jsonwebtoken";
import User from "../models/user"

const jwtMiddleware = async (ctx, next) => {
    const token = ctx.cookies.get("access_token");

    if (!token) return next();
    try {
        const decoded = jwt.verify(token, process.env.JWT_SECRET);
        ctx.state.user = {
            _id: decoded._id,
            username: decoded.username
        }
        //토큰의 남은 유효 기간이 3.5일 미만이면 재발급
        const now = Math.floor(Date.now() / 1000);
        if (decoded.exp - now < 60 * 60 * 24 * 3.5) {
            const user = await User.findById(decoded_id);
            const token = user.generateToken();
            ctx.cookies.set("access_token", token, {
                maxAge: 1000 * 60 * 60 * 24 * 7, httpOnly: true
            })
        }
        return next();
    } catch (e) {
        return next()
    }
}

export default jwtMiddleware