23. 로그인(Login)과 JWT 인증
1. 로그인(Login)이란?
로그인은 사용자의 신원을 확인하여 서비스 이용 권한을 부여하는 기능입니다.
예를 들어 동부산CC에서는
회원 로그인
관리자 로그인
을 구현할 수 있습니다.
로그인 성공 후에는
예약하기
예약 조회
회원정보 수정
관리자 페이지
등의 기능을 사용할 수 있습니다.
2. 로그인 구조
사용자
↓
React
↓
Axios
↓
PHP(API)
↓
MySQL
↓
JWT 발급
↓
React 저장
로그인이 성공하면 서버는 JWT를 발급합니다.
3. JWT란?
JWT(JSON Web Token)는 로그인 성공 후
사용자를 증명하는 토큰(Token)입니다.
예)
eyJhbGciOi...
React는 이 토큰을 저장하여
로그인 상태를 유지합니다.
4. 로그인 화면
아이디
비밀번호
[ 로그인 ]
[ 회원가입 ]
React에서는 Form으로 작성합니다.
5. State 만들기
const [form,setForm]=useState({
id:"",
password:""
});
6. 로그인 요청
await axios.post(
"/api/login.php",
form
);
React는
아이디와 비밀번호를
서버에 전달합니다.
7. PHP 처리
아이디 확인
↓
비밀번호 확인
↓
성공
↓
JWT 생성
↓
React 전달
8. 토큰 저장
로그인 성공
localStorage.setItem(
"token",
res.data.token
);
또는
sessionStorage
를 사용할 수도 있습니다.
9. 로그인 유지
페이지가 열릴 때
useEffect(()=>{
const token=
localStorage.getItem(
"token"
);
},[]);
토큰이 있으면
로그인 상태를 유지합니다.
10. 로그아웃
localStorage.removeItem(
"token"
);
토큰이 삭제되면
로그아웃됩니다.
11. 로그인 상태
const [login,setLogin]
=
useState(false);
토큰 확인
if(token){
setLogin(true);
}
12. 조건부 렌더링
{
login
?
<MyPage/>
:
<Login/>
}
로그인 여부에 따라
다른 화면을 출력합니다.
13. 관리자 페이지
로그인
↓
JWT 확인
↓
관리자 권한 확인
↓
Admin Page
권한이 없으면
접근할 수 없습니다.
14. Axios 토큰 전달
axios.get(
"/api/member",
{
headers:{
Authorization:
"Bearer "+token
}
}
);
모든 API 요청에
토큰을 함께 보냅니다.
15. PHP JWT 확인
JWT 확인
↓
유효
↓
데이터 반환
토큰이 없거나 만료되면
401 Unauthorized를 반환합니다.
16. 동부산CC 로그인 구조
로그인
↓
JWT 저장
↓
예약
↓
예약 조회
↓
마이페이지
↓
로그아웃
17. 실행 흐름
아이디 입력
↓
POST
↓
PHP
↓
MySQL
↓
JWT
↓
localStorage
↓
로그인 완료
18. React에서 사용하는 기술
기능 React 기술
입력 Form
로그인 Axios POST
로그인 상태 useState
로그인 유지 useEffect
토큰 저장 localStorage
화면 변경 조건부 렌더링
19. JWT 장점
✔ 로그인 유지
✔ 서버 부하 감소
✔ 모바일 지원
✔ 보안 향상
✔ API 인증
20. 실무 프로젝트 적용
동부산CC
회원 로그인
↓
JWT
↓
예약하기
↓
예약 확인
↓
회원정보 수정
↓
로그아웃
관리자
↓
JWT
↓
공지 관리
↓
예약 관리
↓
회원 관리
정리
JWT(JSON Web Token)는 로그인 성공 후 사용자 인증 정보를 담는 토큰입니다.
React에서는 로그인 요청을 Axios로 전송하고, 서버(PHP 또는 Node.js)는 인증이 성공하면 JWT를 발급합니다.
React는 이 토큰을 localStorage 또는 sessionStorage에 저장하여 로그인 상태를 유지하고, 이후 API 요청 시 Authorization 헤더에 토큰을 포함하여 서버에 전달합니다.
동부산CC 프로젝트에서는 회원 로그인, 관리자 로그인, 예약 조회, 관리자 페이지 접근 등 다양한 기능을 JWT 기반 인증으로 안전하게 구현할 수 있습니다.
1. 로그인(Login)이란?
로그인은 사용자의 신원을 확인하여 서비스 이용 권한을 부여하는 기능입니다.
예를 들어 동부산CC에서는
회원 로그인
관리자 로그인
을 구현할 수 있습니다.
로그인 성공 후에는
예약하기
예약 조회
회원정보 수정
관리자 페이지
등의 기능을 사용할 수 있습니다.
2. 로그인 구조
사용자
↓
React
↓
Axios
↓
PHP(API)
↓
MySQL
↓
JWT 발급
↓
React 저장
로그인이 성공하면 서버는 JWT를 발급합니다.
3. JWT란?
JWT(JSON Web Token)는 로그인 성공 후
사용자를 증명하는 토큰(Token)입니다.
예)
eyJhbGciOi...
React는 이 토큰을 저장하여
로그인 상태를 유지합니다.
4. 로그인 화면
아이디
비밀번호
[ 로그인 ]
[ 회원가입 ]
React에서는 Form으로 작성합니다.
5. State 만들기
const [form,setForm]=useState({
id:"",
password:""
});
6. 로그인 요청
await axios.post(
"/api/login.php",
form
);
React는
아이디와 비밀번호를
서버에 전달합니다.
7. PHP 처리
아이디 확인
↓
비밀번호 확인
↓
성공
↓
JWT 생성
↓
React 전달
8. 토큰 저장
로그인 성공
localStorage.setItem(
"token",
res.data.token
);
또는
sessionStorage
를 사용할 수도 있습니다.
9. 로그인 유지
페이지가 열릴 때
useEffect(()=>{
const token=
localStorage.getItem(
"token"
);
},[]);
토큰이 있으면
로그인 상태를 유지합니다.
10. 로그아웃
localStorage.removeItem(
"token"
);
토큰이 삭제되면
로그아웃됩니다.
11. 로그인 상태
const [login,setLogin]
=
useState(false);
토큰 확인
if(token){
setLogin(true);
}
12. 조건부 렌더링
{
login
?
<MyPage/>
:
<Login/>
}
로그인 여부에 따라
다른 화면을 출력합니다.
13. 관리자 페이지
로그인
↓
JWT 확인
↓
관리자 권한 확인
↓
Admin Page
권한이 없으면
접근할 수 없습니다.
14. Axios 토큰 전달
axios.get(
"/api/member",
{
headers:{
Authorization:
"Bearer "+token
}
}
);
모든 API 요청에
토큰을 함께 보냅니다.
15. PHP JWT 확인
JWT 확인
↓
유효
↓
데이터 반환
토큰이 없거나 만료되면
401 Unauthorized를 반환합니다.
16. 동부산CC 로그인 구조
로그인
↓
JWT 저장
↓
예약
↓
예약 조회
↓
마이페이지
↓
로그아웃
17. 실행 흐름
아이디 입력
↓
POST
↓
PHP
↓
MySQL
↓
JWT
↓
localStorage
↓
로그인 완료
18. React에서 사용하는 기술
기능 React 기술
입력 Form
로그인 Axios POST
로그인 상태 useState
로그인 유지 useEffect
토큰 저장 localStorage
화면 변경 조건부 렌더링
19. JWT 장점
✔ 로그인 유지
✔ 서버 부하 감소
✔ 모바일 지원
✔ 보안 향상
✔ API 인증
20. 실무 프로젝트 적용
동부산CC
회원 로그인
↓
JWT
↓
예약하기
↓
예약 확인
↓
회원정보 수정
↓
로그아웃
관리자
↓
JWT
↓
공지 관리
↓
예약 관리
↓
회원 관리
정리
JWT(JSON Web Token)는 로그인 성공 후 사용자 인증 정보를 담는 토큰입니다.
React에서는 로그인 요청을 Axios로 전송하고, 서버(PHP 또는 Node.js)는 인증이 성공하면 JWT를 발급합니다.
React는 이 토큰을 localStorage 또는 sessionStorage에 저장하여 로그인 상태를 유지하고, 이후 API 요청 시 Authorization 헤더에 토큰을 포함하여 서버에 전달합니다.
동부산CC 프로젝트에서는 회원 로그인, 관리자 로그인, 예약 조회, 관리자 페이지 접근 등 다양한 기능을 JWT 기반 인증으로 안전하게 구현할 수 있습니다.
#23. 로그인(Login)과 JWT 인증