19강. JWT(JSON Web Token) 로그인
이번 강의에서는 JWT(JSON Web Token)를 사용하여 로그인 인증을 구현합니다.
목표: 로그인 성공 시 JWT를 발급하고, 토큰을 이용해 로그인 상태를 확인할 수 있습니다.
1. JWT란?
JWT(JSON Web Token)는 로그인한 사용자를 인증하기 위한 토큰(Token)입니다.
Session과 달리 서버에 로그인 정보를 저장하지 않고, 클라이언트가 토큰을 보관합니다.
동작 구조
사용자
↓
로그인
↓
아이디 / 비밀번호 확인
↓
JWT 발급
↓
브라우저 저장(LocalStorage 또는 Cookie)
↓
API 요청
↓
JWT 전송
↓
JWT 검증
↓
인증 완료
2. Session과 JWT 차이
Session JWT
서버에 저장 클라이언트에 저장
서버 메모리 사용 서버 메모리 사용 적음
서버 확장 시 관리 필요 확장에 유리
전통적인 웹 서비스 React, 모바일 앱에서 많이 사용
3. JWT 설치
npm install jsonwebtoken
또는
npm i jsonwebtoken
4. JWT 불러오기
const jwt = require("jsonwebtoken");
5. 로그인 성공 시 토큰 생성
const token = jwt.sign(
{
id:1,
userid:"admin"
},
"secretKey",
{
expiresIn:"1h"
}
);
console.log(token);
6. Token 구조
JWT는
Header
.
Payload
.
Signature
세 부분으로 구성됩니다.
예시
xxxxx.yyyyy.zzzzz
7. 로그인 API
app.post("/login",(req,res)=>{
const{
userid,
password
}=req.body;
const sql=
"SELECT * FROM member WHERE userid=?";
db.query(sql,[userid],(err,result)=>{
if(result.length===0){
return res.send("아이디 없음");
}
if(result[0].password!==password){
return res.send("비밀번호 오류");
}
const token=jwt.sign(
{
id:result[0].id,
userid:result[0].userid
},
"secretKey",
{
expiresIn:"1h"
}
);
res.json({
message:"로그인 성공",
token
});
});
});
8. 로그인 결과
{
"message":"로그인 성공",
"token":"eyJhbGc..."
}
9. Token 검증
const decoded = jwt.verify(
token,
"secretKey"
);
console.log(decoded);
결과
{
id:1,
userid:"admin",
iat:1711111111,
exp:1711114711
}
10. 인증 미들웨어
function auth(req,res,next){
const token = req.headers.authorization;
if(!token){
return res.status(401).send("토큰 없음");
}
try{
const user = jwt.verify(
token,
"secretKey"
);
req.user=user;
next();
}catch{
res.status(401).send("토큰 오류");
}
}
11. 로그인한 사용자만 접근
app.get("/mypage",
auth,
(req,res)=>{
res.json(req.user);
});
브라우저 요청 헤더
Authorization:
eyJhbGc...
12. React에서 사용
로그인 성공
localStorage.setItem(
"token",
token
);
API 호출
fetch("/mypage",{
headers:{
Authorization:
localStorage.getItem("token")
}
});
13. 로그아웃
JWT는 서버에서 삭제하지 않습니다.
React
localStorage.removeItem(
"token"
);
로그아웃 완료
14. 토큰 만료
jwt.sign(
payload,
"secret",
{
expiresIn:"1d"
}
);
예시
1h
12h
1d
7d
15. Refresh Token
실무에서는
Access Token
↓
30분
↓
만료
↓
Refresh Token
↓
새 Token 발급
방식을 많이 사용합니다.
16. 실습 1
로그인
POST
/login
↓
Token 발급
17. 실습 2
Token 확인
jwt.verify(
token,
"secretKey"
);
18. 실습 3
인증 페이지
GET
/mypage
↓
Token 검사
19. 실무 프로젝트 구조
project
│
├── app.js
│
├── middleware
│ auth.js
│
├── routes
│
├── controllers
│
├── models
│
├── config
│
└── public
20. 이번 강의 핵심 정리
함수 설명
jwt.sign() 토큰 생성
jwt.verify() 토큰 확인
Authorization 토큰 전달
req.user 로그인 사용자
expiresIn 만료 시간
실무 팁
실무에서는 다음과 같은 보안 방식을 함께 적용하는 것이 일반적입니다.
비밀번호는 bcrypt로 해시 저장
JWT 비밀키는 .env 파일에서 관리
Authorization: Bearer <token> 형식을 사용
토큰 만료 시 Refresh Token으로 재발급
HTTPS를 통해 토큰을 전송하여 탈취 위험을 줄임
예를 들어 인증 헤더는 다음 형식을 많이 사용합니다.
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...
미들웨어에서는 "Bearer "를 제거한 뒤 토큰을 검증합니다.
실습 미션
다음 기능을 구현해 보세요.
✅ 회원가입
✅ 로그인
✅ JWT 발급
✅ JWT 검증
✅ 인증 미들웨어 작성
✅ /mypage 보호
✅ 로그아웃(LocalStorage에서 토큰 삭제)
이번 강의에서는 JWT(JSON Web Token)를 사용하여 로그인 인증을 구현합니다.
목표: 로그인 성공 시 JWT를 발급하고, 토큰을 이용해 로그인 상태를 확인할 수 있습니다.
1. JWT란?
JWT(JSON Web Token)는 로그인한 사용자를 인증하기 위한 토큰(Token)입니다.
Session과 달리 서버에 로그인 정보를 저장하지 않고, 클라이언트가 토큰을 보관합니다.
동작 구조
사용자
↓
로그인
↓
아이디 / 비밀번호 확인
↓
JWT 발급
↓
브라우저 저장(LocalStorage 또는 Cookie)
↓
API 요청
↓
JWT 전송
↓
JWT 검증
↓
인증 완료
2. Session과 JWT 차이
Session JWT
서버에 저장 클라이언트에 저장
서버 메모리 사용 서버 메모리 사용 적음
서버 확장 시 관리 필요 확장에 유리
전통적인 웹 서비스 React, 모바일 앱에서 많이 사용
3. JWT 설치
npm install jsonwebtoken
또는
npm i jsonwebtoken
4. JWT 불러오기
const jwt = require("jsonwebtoken");
5. 로그인 성공 시 토큰 생성
const token = jwt.sign(
{
id:1,
userid:"admin"
},
"secretKey",
{
expiresIn:"1h"
}
);
console.log(token);
6. Token 구조
JWT는
Header
.
Payload
.
Signature
세 부분으로 구성됩니다.
예시
xxxxx.yyyyy.zzzzz
7. 로그인 API
app.post("/login",(req,res)=>{
const{
userid,
password
}=req.body;
const sql=
"SELECT * FROM member WHERE userid=?";
db.query(sql,[userid],(err,result)=>{
if(result.length===0){
return res.send("아이디 없음");
}
if(result[0].password!==password){
return res.send("비밀번호 오류");
}
const token=jwt.sign(
{
id:result[0].id,
userid:result[0].userid
},
"secretKey",
{
expiresIn:"1h"
}
);
res.json({
message:"로그인 성공",
token
});
});
});
8. 로그인 결과
{
"message":"로그인 성공",
"token":"eyJhbGc..."
}
9. Token 검증
const decoded = jwt.verify(
token,
"secretKey"
);
console.log(decoded);
결과
{
id:1,
userid:"admin",
iat:1711111111,
exp:1711114711
}
10. 인증 미들웨어
function auth(req,res,next){
const token = req.headers.authorization;
if(!token){
return res.status(401).send("토큰 없음");
}
try{
const user = jwt.verify(
token,
"secretKey"
);
req.user=user;
next();
}catch{
res.status(401).send("토큰 오류");
}
}
11. 로그인한 사용자만 접근
app.get("/mypage",
auth,
(req,res)=>{
res.json(req.user);
});
브라우저 요청 헤더
Authorization:
eyJhbGc...
12. React에서 사용
로그인 성공
localStorage.setItem(
"token",
token
);
API 호출
fetch("/mypage",{
headers:{
Authorization:
localStorage.getItem("token")
}
});
13. 로그아웃
JWT는 서버에서 삭제하지 않습니다.
React
localStorage.removeItem(
"token"
);
로그아웃 완료
14. 토큰 만료
jwt.sign(
payload,
"secret",
{
expiresIn:"1d"
}
);
예시
1h
12h
1d
7d
15. Refresh Token
실무에서는
Access Token
↓
30분
↓
만료
↓
Refresh Token
↓
새 Token 발급
방식을 많이 사용합니다.
16. 실습 1
로그인
POST
/login
↓
Token 발급
17. 실습 2
Token 확인
jwt.verify(
token,
"secretKey"
);
18. 실습 3
인증 페이지
GET
/mypage
↓
Token 검사
19. 실무 프로젝트 구조
project
│
├── app.js
│
├── middleware
│ auth.js
│
├── routes
│
├── controllers
│
├── models
│
├── config
│
└── public
20. 이번 강의 핵심 정리
함수 설명
jwt.sign() 토큰 생성
jwt.verify() 토큰 확인
Authorization 토큰 전달
req.user 로그인 사용자
expiresIn 만료 시간
실무 팁
실무에서는 다음과 같은 보안 방식을 함께 적용하는 것이 일반적입니다.
비밀번호는 bcrypt로 해시 저장
JWT 비밀키는 .env 파일에서 관리
Authorization: Bearer <token> 형식을 사용
토큰 만료 시 Refresh Token으로 재발급
HTTPS를 통해 토큰을 전송하여 탈취 위험을 줄임
예를 들어 인증 헤더는 다음 형식을 많이 사용합니다.
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...
미들웨어에서는 "Bearer "를 제거한 뒤 토큰을 검증합니다.
실습 미션
다음 기능을 구현해 보세요.
✅ 회원가입
✅ 로그인
✅ JWT 발급
✅ JWT 검증
✅ 인증 미들웨어 작성
✅ /mypage 보호
✅ 로그아웃(LocalStorage에서 토큰 삭제)
#19강. JWT(JSON Web Token) 로그인