AWESOMEDEV
111590104e
- 로그인/회원가입/아이디찾기/비밀번호재설정 (세션 기반) - 대시보드(주차별 진도 체크리스트), 학습 문서 뷰어(17종), 과제 제출/멘토 피드백 - 코딩 기초·개발 환경 설치 가이드 학습 페이지 - 전 소스 한국어 학습 주석 — 수습생 교육용 저장소 - Docker 배포 구성 (Caddy + Spring Boot + PG + Gitea) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
36 lines
1.8 KiB
JavaScript
36 lines
1.8 KiB
JavaScript
// 이 파일이 하는 일: 백엔드 API를 호출하는 axios 인스턴스를 하나만 만들어 공유한다.
|
|
// 모든 페이지가 이 client를 import해서 쓰므로 baseURL·인증 설정이 한 곳에 모인다.
|
|
import axios from 'axios';
|
|
|
|
const client = axios.create({
|
|
// vite dev 서버의 proxy 설정(vite.config.js)이 '/api'를 백엔드로 넘겨준다.
|
|
baseURL: '/api',
|
|
// 학습 포인트: 세션 쿠키 인증은 브라우저가 쿠키를 자동으로 실어 보내야 동작한다.
|
|
// withCredentials: true가 없으면 로그인해도 다음 요청부터 401이 난다.
|
|
// 원리: 로그인 성공 시 서버가 Set-Cookie 헤더로 세션 ID를 심어 주고,
|
|
// 이후 요청마다 브라우저가 그 쿠키를 도로 보내면 서버가 "아, 아까 그 사람"을 알아본다.
|
|
// withCredentials는 "이 요청에 쿠키를 포함해도 된다"는 axios 쪽 허락 스위치다.
|
|
withCredentials: true,
|
|
});
|
|
|
|
// 학습 포인트: 응답 인터셉터 — 모든 API 응답이 여기를 한 번 거친다.
|
|
// 세션이 만료되어 401이 오면 페이지마다 처리 코드를 두는 대신
|
|
// 여기서 한 번에 로그인 화면으로 보낸다.
|
|
client.interceptors.response.use(
|
|
(response) => response,
|
|
(error) => {
|
|
const status = error.response?.status;
|
|
const url = error.config?.url || '';
|
|
// 예외: 로그인 시도 자체의 401(비밀번호 틀림)과
|
|
// 로그인 여부 확인용 /auth/me의 401은 리다이렉트하면 안 된다.
|
|
// (로그인 페이지에서 무한 새로고침이 되어버린다.)
|
|
const isAuthCheck = url.includes('/auth/login') || url.includes('/auth/me');
|
|
if (status === 401 && !isAuthCheck && window.location.pathname !== '/login') {
|
|
window.location.href = '/login';
|
|
}
|
|
return Promise.reject(error);
|
|
}
|
|
);
|
|
|
|
export default client;
|