refactor: 프론트엔드 SSO 인증 통합 및 API 경로 정리
- Gateway 로그인/포탈 페이지 SSO 연동 - System1 web/fastapi-bridge API base URL 동적 설정 - SSO 토큰 기반 인증 흐름 통일 - deprecated JS 파일 삭제 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
@@ -7,12 +7,10 @@ function getApiBaseUrl() {
|
||||
const protocol = window.location.protocol;
|
||||
const port = window.location.port;
|
||||
|
||||
console.log('🌐 감지된 환경:', { hostname, protocol, port });
|
||||
|
||||
// 🔗 외부 도메인 (Cloudflare Tunnel) - Gateway nginx가 /api/를 프록시
|
||||
if (hostname.includes('technicalkorea.net')) {
|
||||
const baseUrl = `${protocol}//${hostname}${config.api.path}`;
|
||||
console.log('✅ Gateway 프록시 사용:', baseUrl);
|
||||
return baseUrl;
|
||||
}
|
||||
|
||||
@@ -21,27 +19,24 @@ function getApiBaseUrl() {
|
||||
hostname === 'localhost' || hostname === '127.0.0.1' ||
|
||||
hostname.includes('.local') || hostname.includes('hyungi')) {
|
||||
const baseUrl = `${protocol}//${hostname}:${config.api.port}${config.api.path}`;
|
||||
console.log('✅ 로컬 직접 접근:', baseUrl);
|
||||
return baseUrl;
|
||||
}
|
||||
|
||||
// 🚨 기타: 포트 없이 상대 경로
|
||||
const baseUrl = `${protocol}//${hostname}${config.api.path}`;
|
||||
console.log('✅ 기본 프록시 사용:', baseUrl);
|
||||
return baseUrl;
|
||||
}
|
||||
|
||||
// API 설정
|
||||
const API_URL = getApiBaseUrl();
|
||||
|
||||
// 전역 변수로 설정
|
||||
window.API = API_URL;
|
||||
window.API_BASE_URL = API_URL;
|
||||
// 전역 변수로 설정 (api-base.js가 이미 설정한 경우 유지)
|
||||
if (!window.API) window.API = API_URL;
|
||||
if (!window.API_BASE_URL) window.API_BASE_URL = API_URL;
|
||||
|
||||
function ensureAuthenticated() {
|
||||
const token = localStorage.getItem('sso_token');
|
||||
if (!token || token === 'undefined' || token === 'null') {
|
||||
console.log('🚨 인증되지 않은 사용자. 로그인 페이지로 이동합니다.');
|
||||
clearAuthData(); // 만약을 위해 한번 더 정리
|
||||
redirectToLogin();
|
||||
return false; // 이후 코드 실행 방지
|
||||
@@ -49,7 +44,6 @@ function ensureAuthenticated() {
|
||||
|
||||
// 토큰 만료 확인
|
||||
if (isTokenExpired(token)) {
|
||||
console.log('🚨 토큰이 만료되었습니다. 로그인 페이지로 이동합니다.');
|
||||
clearAuthData();
|
||||
alert('세션이 만료되었습니다. 다시 로그인해주세요.');
|
||||
redirectToLogin();
|
||||
@@ -75,8 +69,6 @@ function isTokenExpired(token) {
|
||||
function clearAuthData() {
|
||||
localStorage.removeItem('sso_token');
|
||||
localStorage.removeItem('sso_user');
|
||||
localStorage.removeItem('userInfo');
|
||||
localStorage.removeItem('currentUser');
|
||||
// SSO 쿠키도 삭제 (로그인 페이지 자동 리다이렉트 방지)
|
||||
var cookieDomain = window.location.hostname.includes('technicalkorea.net')
|
||||
? '; domain=.technicalkorea.net' : '';
|
||||
@@ -112,12 +104,10 @@ async function apiCall(url, method = 'GET', data = null) {
|
||||
}
|
||||
|
||||
try {
|
||||
console.log(`📡 API 호출: ${fullUrl} (${method})`);
|
||||
const response = await fetch(fullUrl, options);
|
||||
|
||||
// 인증 만료 처리
|
||||
if (response.status === 401) {
|
||||
console.error('🚨 인증 실패: 토큰이 만료되었거나 유효하지 않습니다.');
|
||||
clearAuthData();
|
||||
alert('세션이 만료되었습니다. 다시 로그인해주세요.');
|
||||
redirectToLogin();
|
||||
@@ -132,8 +122,7 @@ async function apiCall(url, method = 'GET', data = null) {
|
||||
|
||||
if (contentType && contentType.includes('application/json')) {
|
||||
const errorData = await response.json();
|
||||
console.error('📋 서버 에러 상세:', errorData);
|
||||
|
||||
|
||||
// 에러 메시지 추출 (여러 형식 지원)
|
||||
if (typeof errorData === 'string') {
|
||||
errorMessage = errorData;
|
||||
@@ -150,23 +139,18 @@ async function apiCall(url, method = 'GET', data = null) {
|
||||
}
|
||||
} else {
|
||||
const errorText = await response.text();
|
||||
console.error('📋 서버 에러 텍스트:', errorText);
|
||||
errorMessage = errorText || errorMessage;
|
||||
errorMessage = errorText || errorMessage;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('📋 에러 파싱 중 예외 발생:', e.message);
|
||||
// 파싱 실패해도 HTTP 상태 코드는 전달
|
||||
}
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
console.log(`✅ API 성공: ${fullUrl}`);
|
||||
return result;
|
||||
|
||||
} catch (error) {
|
||||
console.error(`❌ API 오류 (${fullUrl}):`, error);
|
||||
console.error('❌ 에러 전체 내용:', JSON.stringify(error, null, 2));
|
||||
|
||||
// 네트워크 오류 vs 서버 오류 구분
|
||||
if (error.name === 'TypeError' && error.message.includes('fetch')) {
|
||||
@@ -177,36 +161,6 @@ async function apiCall(url, method = 'GET', data = null) {
|
||||
}
|
||||
}
|
||||
|
||||
// 디버깅 정보
|
||||
console.log('🔗 API Base URL:', API);
|
||||
console.log('🌐 Current Location:', {
|
||||
hostname: window.location.hostname,
|
||||
protocol: window.location.protocol,
|
||||
port: window.location.port,
|
||||
href: window.location.href
|
||||
});
|
||||
|
||||
// 🧪 API 연결 테스트 함수 (개발용)
|
||||
async function testApiConnection() {
|
||||
try {
|
||||
console.log('🧪 API 연결 테스트 시작...');
|
||||
const response = await fetch(`${API}/health`, {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
console.log('✅ API 연결 성공!');
|
||||
return true;
|
||||
} else {
|
||||
console.log('❌ API 연결 실패:', response.status);
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('❌ API 연결 오류:', error.message);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// API 헬퍼 함수들
|
||||
async function apiGet(url) {
|
||||
@@ -225,35 +179,26 @@ async function apiDelete(url) {
|
||||
return apiCall(url, 'DELETE');
|
||||
}
|
||||
|
||||
// 전역 함수로 설정
|
||||
// 전역 함수로 설정 (api-base.js가 이미 등록한 것은 덮어쓰지 않음)
|
||||
window.ensureAuthenticated = ensureAuthenticated;
|
||||
window.getAuthHeaders = getAuthHeaders;
|
||||
window.apiCall = apiCall;
|
||||
if (!window.getAuthHeaders) window.getAuthHeaders = getAuthHeaders;
|
||||
if (!window.apiCall) window.apiCall = apiCall;
|
||||
window.apiGet = apiGet;
|
||||
window.apiPost = apiPost;
|
||||
window.apiPut = apiPut;
|
||||
window.apiDelete = apiDelete;
|
||||
window.testApiConnection = testApiConnection;
|
||||
window.isTokenExpired = isTokenExpired;
|
||||
window.clearAuthData = clearAuthData;
|
||||
|
||||
// 개발 모드에서 자동 테스트
|
||||
if (window.location.hostname === 'localhost' || window.location.hostname.startsWith('192.168.')) {
|
||||
setTimeout(() => {
|
||||
testApiConnection();
|
||||
}, 1000);
|
||||
}
|
||||
if (!window.clearAuthData) window.clearAuthData = clearAuthData;
|
||||
|
||||
// 주기적으로 토큰 만료 확인 (5분마다)
|
||||
setInterval(() => {
|
||||
const token = localStorage.getItem('sso_token');
|
||||
if (token && isTokenExpired(token)) {
|
||||
console.log('🚨 주기적 확인: 토큰이 만료되었습니다.');
|
||||
clearAuthData();
|
||||
alert('세션이 만료되었습니다. 다시 로그인해주세요.');
|
||||
redirectToLogin();
|
||||
}
|
||||
}, config.app.tokenRefreshInterval); // 5분마다 확인
|
||||
}, config.app.tokenRefreshInterval);
|
||||
|
||||
// ES6 모듈 export
|
||||
export { API_URL as API_BASE_URL, API_URL as API, apiCall, getAuthHeaders };
|
||||
Reference in New Issue
Block a user