시작하면서...

json web token 방식은 사실 MERN 스택 강의를 들으며 적용해보았기에,
찍먹하기 위해 따로 코드를 작성하지는 않았다.

그러나, 깔끔한 시리즈 작성을 위해 즉석으로 글을 작성해보기로 했다.

이래도 될 정도로 express환경에서 jwt를 사용하기 너무 간단했다.

(물론 간단한 과정만 강의에서 소개해주었기 때문이겠지만)

---

실습

모든 실습은 express를 통해 진행되었다.

간단한 백엔드 작업만으로, 브라우저에서 확인할 수 있을 정도만 코드를 작성했다.

JWT

기본 세팅

우선, jwt에 필요한 패키지들은 다음과 같다.

• jsonwebtoken
• dotenv
• cookie-parser

이전 포스트와 같이 세상에서 가장 간단한 백엔드 코드를 작성해준다.

import express from 'express';
import jwt from 'jsonwebtoken';
import dotenv from 'dotenv';
import cookieParser from 'cookie-parser';

dotenv.config();

const app = express();
app.use(cookieParser()); // 쿠키 작업을 위한 미들웨어

app.get('/', (req, res, next) => {
  console.log('와우');
});

app.listen(3000,()=>{
	console.log("3000번 켜짐");
});

JWT 적용하기

우선 서버쪽에 데이터가 와야하는데,
프론트 단을 만들기보다 url query로 데이터를 넘기는 편이 간단하기에
다음과 같이 '/'라우터를 변경한다..

app.get('/', (req, res, next) => {
  console.log('와우');
  const data = req.query.data;
});
 

이제 브라우저 URL에 다음과 같이 입력하면 데이터를 백에서 받을 수 있다
http://localhost:3000?data=123

이렇게 받아온 data를 jwt을 통해 토큰을 발급해서 cookie로 넘겨주자.

app.get('/', (req, res, next) => {
  console.log('와우');
  const data = req.query.data;
  const token = jwt.sign(data, process.env.JWT_SECRET,{
  	expiresIn:'1m' // 1분의 수명
  });
  res.cookie('token',token,{httpOnly:true});
});

❕httpOnly옵션은 js를 통한 공격을 막기 위해 사용한다.

이제 브라우저에 들어가 cookie를 살펴보면 token을 확인할 수 있다!


이번에는 db연결은 생략하겠다.
mongoose를 통해 findOne, create등을 사용하면 된다

참조

리액트로 나만의 블로그 만들기