[feat]: 보호된 대시보드 및 API 라우트 추가
- 인증된 사용자용 대시보드 페이지 구현 ((protected) 라우트 그룹) - API 엔드포인트 추가 (인증, 사용자 관리) - 커스텀 훅 추가 (useAuth) - 미들웨어 인증 로직 강화 - 환경변수 예제 업데이트 - 기존 dashboard 페이지 제거 후 보호된 라우트로 이동 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
36
.env.example
36
.env.example
@@ -1,5 +1,39 @@
|
||||
# ==============================================
|
||||
# API Configuration
|
||||
# ==============================================
|
||||
NEXT_PUBLIC_API_URL=https://api.5130.co.kr
|
||||
|
||||
# Frontend URL (for CORS)
|
||||
NEXT_PUBLIC_FRONTEND_URL=http://localhost:3000
|
||||
NEXT_PUBLIC_FRONTEND_URL=http://localhost:3000
|
||||
|
||||
# ==============================================
|
||||
# Authentication Mode
|
||||
# ==============================================
|
||||
# 인증 모드 선택: sanctum | bearer
|
||||
# - sanctum: 웹 브라우저 사용자 (HTTP-only 쿠키)
|
||||
# - bearer: 모바일/SPA (토큰 기반)
|
||||
NEXT_PUBLIC_AUTH_MODE=sanctum
|
||||
|
||||
# ==============================================
|
||||
# API Key (⚠️ 서버 사이드 전용 - 절대 공개 금지!)
|
||||
# ==============================================
|
||||
# 개발팀 공유: 팀 내부 문서에서 키 값 확인
|
||||
# 주기적 갱신: PHP 백엔드 팀에서 새 키 발급 시 업데이트 필요
|
||||
#
|
||||
# ⚠️ 주의사항:
|
||||
# 1. 절대 NEXT_PUBLIC_ 접두사 붙이지 말 것!
|
||||
# 2. Git에 커밋하지 말 것! (.gitignore에 포함됨)
|
||||
# 3. 브라우저에서 접근 불가 (서버 사이드 전용)
|
||||
#
|
||||
# 사용처:
|
||||
# - 서버 간 통신 (Next.js API Routes)
|
||||
# - 백그라운드 작업 (Cron, Scripts)
|
||||
# - 외부 시스템 연동
|
||||
API_KEY=your-secret-api-key-here
|
||||
|
||||
# ==============================================
|
||||
# Development Notes
|
||||
# ==============================================
|
||||
# 1. .env.example을 복사하여 .env.local 생성
|
||||
# 2. .env.local에 실제 키 값 입력
|
||||
# 3. .env.local은 Git에 커밋되지 않음
|
||||
@@ -4,7 +4,7 @@ import createNextIntlPlugin from 'next-intl/plugin';
|
||||
const withNextIntl = createNextIntlPlugin('./src/i18n/request.ts');
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
turbopack: {}, // ✅ CRITICAL: Next.js 15 + next-intl compatibility
|
||||
};
|
||||
|
||||
export default withNextIntl(nextConfig);
|
||||
|
||||
@@ -1,13 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import LanguageSwitcher from '@/components/LanguageSwitcher';
|
||||
import WelcomeMessage from '@/components/WelcomeMessage';
|
||||
import NavigationMenu from '@/components/NavigationMenu';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { LogOut } from 'lucide-react';
|
||||
|
||||
/**
|
||||
* Dashboard Page with Internationalization
|
||||
*
|
||||
* Note: Authentication protection is handled by (protected)/layout.tsx
|
||||
*/
|
||||
export default function Dashboard() {
|
||||
const t = useTranslations('common');
|
||||
const router = useRouter();
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
// ✅ HttpOnly Cookie 방식: Next.js API Route로 프록시
|
||||
const response = await fetch('/api/auth/logout', {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
console.log('✅ 로그아웃 완료: HttpOnly 쿠키 삭제됨');
|
||||
}
|
||||
|
||||
// 로그인 페이지로 리다이렉트
|
||||
router.push('/login');
|
||||
} catch (error) {
|
||||
console.error('로그아웃 처리 중 오류:', error);
|
||||
// 에러가 나도 로그인 페이지로 이동
|
||||
router.push('/login');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-8">
|
||||
@@ -17,7 +45,17 @@ export default function Dashboard() {
|
||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{t('appName')}
|
||||
</h1>
|
||||
<LanguageSwitcher />
|
||||
<div className="flex items-center gap-3">
|
||||
<LanguageSwitcher />
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleLogout}
|
||||
className="rounded-xl"
|
||||
>
|
||||
<LogOut className="w-4 h-4 mr-2" />
|
||||
Logout
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
29
src/app/[locale]/(protected)/layout.tsx
Normal file
29
src/app/[locale]/(protected)/layout.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||||
|
||||
/**
|
||||
* Protected Layout
|
||||
*
|
||||
* Purpose:
|
||||
* - Apply authentication guard to all protected pages
|
||||
* - Prevent browser back button cache issues
|
||||
* - Centralized protection for all routes under (protected)
|
||||
*
|
||||
* Protected Routes:
|
||||
* - /dashboard
|
||||
* - /profile
|
||||
* - /settings
|
||||
* - /admin/*
|
||||
* - All other authenticated pages
|
||||
*/
|
||||
export default function ProtectedLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
// 🔒 모든 하위 페이지에 인증 보호 적용
|
||||
useAuthGuard();
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
39
src/app/api/auth/check/route.ts
Normal file
39
src/app/api/auth/check/route.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import type { NextRequest } from 'next/server';
|
||||
|
||||
/**
|
||||
* Auth Check Route Handler
|
||||
*
|
||||
* Purpose:
|
||||
* - Check if user is authenticated (HttpOnly cookie validation)
|
||||
* - Prevent browser back button cache issues
|
||||
* - Real-time authentication validation
|
||||
*/
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
// Get token from HttpOnly cookie
|
||||
const token = request.cookies.get('user_token')?.value;
|
||||
|
||||
if (!token) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Not authenticated', authenticated: false },
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
// Optional: Verify token with PHP backend
|
||||
// (현재는 토큰 존재 여부만 확인, 필요시 PHP API 호출 추가 가능)
|
||||
|
||||
return NextResponse.json(
|
||||
{ authenticated: true },
|
||||
{ status: 200 }
|
||||
);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Auth check error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Internal server error', authenticated: false },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
83
src/app/api/auth/login/route.ts
Normal file
83
src/app/api/auth/login/route.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import type { NextRequest } from 'next/server';
|
||||
|
||||
/**
|
||||
* Login Proxy Route Handler
|
||||
*
|
||||
* Purpose:
|
||||
* - Proxy login requests to PHP backend
|
||||
* - Store token in HttpOnly cookie (XSS protection)
|
||||
* - Never expose token to client JavaScript
|
||||
*/
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { user_id, user_pwd } = body;
|
||||
|
||||
// Validate input
|
||||
if (!user_id || !user_pwd) {
|
||||
return NextResponse.json(
|
||||
{ error: 'User ID and password are required' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Call PHP backend API
|
||||
const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/login`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'X-API-KEY': process.env.NEXT_PUBLIC_API_KEY || '',
|
||||
},
|
||||
body: JSON.stringify({ user_id, user_pwd }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
return NextResponse.json(
|
||||
{
|
||||
error: errorData.message || 'Login failed',
|
||||
status: response.status
|
||||
},
|
||||
{ status: response.status }
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Prepare response with user data (no token exposed)
|
||||
const responseData = {
|
||||
message: data.message,
|
||||
user: data.user,
|
||||
tenant: data.tenant,
|
||||
menus: data.menus,
|
||||
};
|
||||
|
||||
// Set HttpOnly cookie with token
|
||||
const cookieOptions = [
|
||||
`user_token=${data.user_token}`,
|
||||
'HttpOnly', // ✅ JavaScript cannot access
|
||||
'Secure', // ✅ HTTPS only (production)
|
||||
'SameSite=Strict', // ✅ CSRF protection
|
||||
'Path=/',
|
||||
'Max-Age=604800', // 7 days
|
||||
].join('; ');
|
||||
|
||||
console.log('✅ Login successful - Token stored in HttpOnly cookie');
|
||||
|
||||
return NextResponse.json(responseData, {
|
||||
status: 200,
|
||||
headers: {
|
||||
'Set-Cookie': cookieOptions,
|
||||
},
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Login proxy error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Internal server error' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
64
src/app/api/auth/logout/route.ts
Normal file
64
src/app/api/auth/logout/route.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import type { NextRequest } from 'next/server';
|
||||
|
||||
/**
|
||||
* Logout Proxy Route Handler
|
||||
*
|
||||
* Purpose:
|
||||
* - Call PHP backend logout API
|
||||
* - Clear HttpOnly cookie
|
||||
* - Ensure complete session cleanup
|
||||
*/
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
// Get token from HttpOnly cookie
|
||||
const token = request.cookies.get('user_token')?.value;
|
||||
|
||||
if (token) {
|
||||
// Call PHP backend logout API
|
||||
try {
|
||||
await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/logout`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'X-API-KEY': process.env.NEXT_PUBLIC_API_KEY || '',
|
||||
},
|
||||
});
|
||||
console.log('✅ Backend logout API called successfully');
|
||||
} catch (error) {
|
||||
console.warn('⚠️ Backend logout API failed (continuing with cookie deletion):', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Clear HttpOnly cookie
|
||||
const cookieOptions = [
|
||||
'user_token=',
|
||||
'HttpOnly',
|
||||
'Secure',
|
||||
'SameSite=Strict',
|
||||
'Path=/',
|
||||
'Max-Age=0', // Delete immediately
|
||||
].join('; ');
|
||||
|
||||
console.log('✅ Logout complete - HttpOnly cookie cleared');
|
||||
|
||||
return NextResponse.json(
|
||||
{ message: 'Logged out successfully' },
|
||||
{
|
||||
status: 200,
|
||||
headers: {
|
||||
'Set-Cookie': cookieOptions,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Logout proxy error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Internal server error' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -27,7 +27,7 @@ export function LoginPage() {
|
||||
const [rememberMe, setRememberMe] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const handleLogin = () => {
|
||||
const handleLogin = async () => {
|
||||
setError("");
|
||||
|
||||
// Validation
|
||||
@@ -36,35 +36,45 @@ export function LoginPage() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Demo accounts
|
||||
const demoAccounts = [
|
||||
{ userId: "ceo", password: "demo1234", role: "CEO", name: "김대표", email: "ceo@demo.com" },
|
||||
{ userId: "manager", password: "demo1234", role: "ProductionManager", name: "이생산", email: "manager@demo.com" },
|
||||
{ userId: "worker", password: "demo1234", role: "Worker", name: "박작업", email: "worker@demo.com" },
|
||||
{ userId: "admin", password: "demo1234", role: "SystemAdmin", name: "최시스템", email: "admin@demo.com" },
|
||||
{ userId: "sales", password: "demo1234", role: "Sales", name: "박영업", email: "sales@demo.com" },
|
||||
];
|
||||
try {
|
||||
// ✅ HttpOnly Cookie 방식: Next.js API Route로 프록시
|
||||
// 토큰은 JavaScript에서 접근 불가능한 HttpOnly 쿠키로 저장됨
|
||||
const response = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
user_id: userId,
|
||||
user_pwd: password,
|
||||
}),
|
||||
});
|
||||
|
||||
const account = demoAccounts.find(acc => acc.userId === userId && acc.password === password);
|
||||
const data = await response.json();
|
||||
|
||||
if (account) {
|
||||
// Save user data to localStorage (client-side only)
|
||||
const userData = {
|
||||
userId: account.userId,
|
||||
email: account.email,
|
||||
role: account.role,
|
||||
name: account.name,
|
||||
companyName: "데모 기업",
|
||||
};
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
localStorage.setItem("user", JSON.stringify(userData));
|
||||
if (!response.ok) {
|
||||
throw {
|
||||
status: response.status,
|
||||
message: data.error || 'Login failed',
|
||||
};
|
||||
}
|
||||
|
||||
// Navigate to dashboard
|
||||
console.log('✅ 로그인 성공:', data.message);
|
||||
console.log('📦 사용자 정보:', data.user);
|
||||
console.log('🔐 토큰은 안전한 HttpOnly 쿠키에 저장됨 (JavaScript 접근 불가)');
|
||||
|
||||
// 대시보드로 이동
|
||||
router.push("/dashboard");
|
||||
} else {
|
||||
setError(t('invalidCredentials'));
|
||||
} catch (err: any) {
|
||||
console.error('❌ 로그인 실패:', err);
|
||||
|
||||
if (err.status === 422) {
|
||||
setError(t('invalidCredentials'));
|
||||
} else if (err.status === 429) {
|
||||
setError('너무 많은 로그인 시도가 있었습니다. 잠시 후 다시 시도해주세요.');
|
||||
} else {
|
||||
setError(err.message || t('invalidCredentials'));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
60
src/hooks/useAuthGuard.ts
Normal file
60
src/hooks/useAuthGuard.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
/**
|
||||
* Auth Guard Hook
|
||||
*
|
||||
* Purpose:
|
||||
* - Protect pages from unauthenticated access
|
||||
* - Prevent browser back button cache issues
|
||||
* - Real-time authentication validation
|
||||
*
|
||||
* Usage:
|
||||
* ```tsx
|
||||
* export default function ProtectedPage() {
|
||||
* useAuthGuard();
|
||||
* // ... rest of component
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
export function useAuthGuard() {
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
// 페이지 로드 시 인증 확인
|
||||
const checkAuth = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/auth/check', {
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
// 인증 실패 시 로그인 페이지로 이동
|
||||
console.log('⚠️ 인증 실패: 로그인 페이지로 이동');
|
||||
router.replace('/login');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 인증 확인 오류:', error);
|
||||
router.replace('/login');
|
||||
}
|
||||
};
|
||||
|
||||
checkAuth();
|
||||
|
||||
// 뒤로가기 시 페이지 새로고침 강제
|
||||
const handlePageShow = (event: PageTransitionEvent) => {
|
||||
if (event.persisted) {
|
||||
// 브라우저 캐시에서 로드된 경우 새로고침
|
||||
console.log('🔄 캐시된 페이지 감지: 새로고침');
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('pageshow', handlePageShow);
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
window.removeEventListener('pageshow', handlePageShow);
|
||||
};
|
||||
}, [router]);
|
||||
}
|
||||
56
src/lib/api/auth/auth-config.ts
Normal file
56
src/lib/api/auth/auth-config.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
// lib/api/auth/auth-config.ts
|
||||
|
||||
export const AUTH_CONFIG = {
|
||||
// API Base URL
|
||||
apiUrl: process.env.NEXT_PUBLIC_API_URL || 'https://api.5130.co.kr',
|
||||
|
||||
// Frontend URL
|
||||
frontendUrl: process.env.NEXT_PUBLIC_FRONTEND_URL || 'http://localhost:3000',
|
||||
|
||||
// 인증 모드 (환경에 따라 선택)
|
||||
defaultAuthMode: (process.env.NEXT_PUBLIC_AUTH_MODE || 'sanctum') as 'sanctum' | 'bearer',
|
||||
|
||||
// 🔓 공개 라우트 (인증 불필요)
|
||||
// 명시적으로 여기에 추가된 경로만 비로그인 접근 가능
|
||||
// 기본 정책: 모든 페이지는 인증 필요
|
||||
publicRoutes: [
|
||||
// 비어있음 - 필요시 추가 (예: '/about', '/terms', '/privacy')
|
||||
],
|
||||
|
||||
// 🔒 보호된 라우트 (참고용, 실제로는 기본 정책으로 보호됨)
|
||||
// publicRoutes와 guestOnlyRoutes가 아닌 모든 경로는 자동으로 보호됨
|
||||
protectedRoutes: [
|
||||
'/dashboard',
|
||||
'/profile',
|
||||
'/settings',
|
||||
'/admin',
|
||||
'/tenant',
|
||||
'/users',
|
||||
'/reports',
|
||||
'/analytics',
|
||||
'/inventory',
|
||||
'/finance',
|
||||
'/hr',
|
||||
'/crm',
|
||||
'/employee',
|
||||
'/customer',
|
||||
'/supplier',
|
||||
'/orders',
|
||||
'/invoices',
|
||||
'/payroll',
|
||||
],
|
||||
|
||||
// 게스트 전용 라우트 (로그인 후 접근 불가)
|
||||
guestOnlyRoutes: [
|
||||
'/login',
|
||||
'/signup',
|
||||
'/forgot-password',
|
||||
],
|
||||
|
||||
// 리다이렉트 설정
|
||||
redirects: {
|
||||
afterLogin: '/dashboard',
|
||||
afterLogout: '/login',
|
||||
unauthorized: '/login',
|
||||
},
|
||||
} as const;
|
||||
87
src/lib/api/auth/types.ts
Normal file
87
src/lib/api/auth/types.ts
Normal file
@@ -0,0 +1,87 @@
|
||||
// lib/api/auth/types.ts
|
||||
|
||||
/**
|
||||
* 인증 모드 타입
|
||||
*/
|
||||
export type AuthMode = 'sanctum' | 'api-key' | 'bearer';
|
||||
|
||||
/**
|
||||
* 사용자 정보
|
||||
*/
|
||||
export interface User {
|
||||
id: number;
|
||||
user_id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
role?: string;
|
||||
permissions?: string[];
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 테넌트 정보 (추후 사용)
|
||||
*/
|
||||
export interface Tenant {
|
||||
id: number;
|
||||
name: string;
|
||||
// 추가 필드
|
||||
}
|
||||
|
||||
/**
|
||||
* 메뉴 정보 (추후 사용)
|
||||
*/
|
||||
export interface Menu {
|
||||
id: number;
|
||||
name: string;
|
||||
// 추가 필드
|
||||
}
|
||||
|
||||
/**
|
||||
* 로그인 요청 (PHP API 형식)
|
||||
*/
|
||||
export interface LoginCredentials {
|
||||
user_id: string; // PHP API: user_id
|
||||
user_pwd: string; // PHP API: user_pwd
|
||||
}
|
||||
|
||||
/**
|
||||
* 로그인 응답 (PHP API 형식)
|
||||
*/
|
||||
export interface LoginResponse {
|
||||
message: string;
|
||||
user_token: string; // Bearer 토큰
|
||||
user: User;
|
||||
tenant: Tenant | null;
|
||||
menus: Menu[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 회원가입 요청 (추후 구현)
|
||||
*/
|
||||
export interface RegisterData {
|
||||
name: string;
|
||||
email: string;
|
||||
password: string;
|
||||
password_confirmation: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* API 에러 응답
|
||||
*/
|
||||
export interface ApiError {
|
||||
message: string;
|
||||
errors?: Record<string, string[]>;
|
||||
code?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Bearer Token 응답 (모바일/SPA용)
|
||||
*/
|
||||
export interface BearerTokenResponse {
|
||||
access_token: string;
|
||||
token_type: 'Bearer';
|
||||
expires_in: number;
|
||||
user: User;
|
||||
}
|
||||
153
src/lib/api/client.ts
Normal file
153
src/lib/api/client.ts
Normal file
@@ -0,0 +1,153 @@
|
||||
// lib/api/client.ts
|
||||
import { AUTH_CONFIG } from './auth/auth-config';
|
||||
import type { AuthMode } from './auth/types';
|
||||
|
||||
interface ClientConfig {
|
||||
mode: AuthMode;
|
||||
apiKey?: string; // API Key 모드용
|
||||
getToken?: () => string | null; // Bearer 모드용
|
||||
}
|
||||
|
||||
interface ApiErrorResponse {
|
||||
message: string;
|
||||
errors?: Record<string, string[]>;
|
||||
code?: string;
|
||||
}
|
||||
|
||||
export class ApiClient {
|
||||
private baseURL: string;
|
||||
private mode: AuthMode;
|
||||
private apiKey?: string;
|
||||
private getToken?: () => string | null;
|
||||
|
||||
constructor(config: ClientConfig) {
|
||||
this.baseURL = AUTH_CONFIG.apiUrl;
|
||||
this.mode = config.mode;
|
||||
this.apiKey = config.apiKey;
|
||||
this.getToken = config.getToken;
|
||||
}
|
||||
|
||||
/**
|
||||
* 인증 헤더 생성
|
||||
*/
|
||||
private getAuthHeaders(): Record<string, string> {
|
||||
const headers: Record<string, string> = {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
};
|
||||
|
||||
// API Key는 모든 모드에서 기본으로 포함 (PHP API 요구사항)
|
||||
if (this.apiKey) {
|
||||
headers['X-API-KEY'] = this.apiKey;
|
||||
}
|
||||
|
||||
switch (this.mode) {
|
||||
case 'api-key':
|
||||
// API Key만 사용 (이미 위에서 추가됨)
|
||||
break;
|
||||
|
||||
case 'bearer':
|
||||
const token = this.getToken?.();
|
||||
if (token) {
|
||||
headers['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
// API Key도 함께 전송 (이미 위에서 추가됨)
|
||||
break;
|
||||
|
||||
case 'sanctum':
|
||||
// 쿠키 기반 - 별도 헤더 불필요
|
||||
break;
|
||||
}
|
||||
|
||||
return headers;
|
||||
}
|
||||
|
||||
/**
|
||||
* HTTP 요청 실행
|
||||
*/
|
||||
async request<T>(
|
||||
endpoint: string,
|
||||
options?: RequestInit
|
||||
): Promise<T> {
|
||||
const url = `${this.baseURL}${endpoint}`;
|
||||
const headers = {
|
||||
...this.getAuthHeaders(),
|
||||
...options?.headers,
|
||||
};
|
||||
|
||||
const config: RequestInit = {
|
||||
...options,
|
||||
headers,
|
||||
};
|
||||
|
||||
// Sanctum 모드는 쿠키 포함
|
||||
if (this.mode === 'sanctum') {
|
||||
config.credentials = 'include';
|
||||
}
|
||||
|
||||
const response = await fetch(url, config);
|
||||
|
||||
if (!response.ok) {
|
||||
await this.handleError(response);
|
||||
}
|
||||
|
||||
// 204 No Content 처리
|
||||
if (response.status === 204) {
|
||||
return undefined as T;
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* GET 요청
|
||||
*/
|
||||
async get<T>(endpoint: string): Promise<T> {
|
||||
return this.request<T>(endpoint, { method: 'GET' });
|
||||
}
|
||||
|
||||
/**
|
||||
* POST 요청
|
||||
*/
|
||||
async post<T>(endpoint: string, data?: unknown): Promise<T> {
|
||||
return this.request<T>(endpoint, {
|
||||
method: 'POST',
|
||||
body: data ? JSON.stringify(data) : undefined,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* PUT 요청
|
||||
*/
|
||||
async put<T>(endpoint: string, data?: unknown): Promise<T> {
|
||||
return this.request<T>(endpoint, {
|
||||
method: 'PUT',
|
||||
body: data ? JSON.stringify(data) : undefined,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* DELETE 요청
|
||||
*/
|
||||
async delete<T>(endpoint: string): Promise<T> {
|
||||
return this.request<T>(endpoint, { method: 'DELETE' });
|
||||
}
|
||||
|
||||
/**
|
||||
* 에러 처리
|
||||
*/
|
||||
private async handleError(response: Response): Promise<never> {
|
||||
const data = await response.json().catch(() => ({}));
|
||||
|
||||
const error: ApiErrorResponse = {
|
||||
message: data.message || 'An error occurred',
|
||||
errors: data.errors,
|
||||
code: data.code,
|
||||
};
|
||||
|
||||
throw {
|
||||
status: response.status,
|
||||
...error,
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -9,13 +9,18 @@ import { locales, defaultLocale } from '@/i18n/config';
|
||||
* Features:
|
||||
* 1. Internationalization (i18n) with locale detection
|
||||
* 2. Bot Detection and blocking for security
|
||||
* 3. Authentication and authorization (Sanctum/Bearer/API-Key)
|
||||
*
|
||||
* Strategy: Moderate bot blocking
|
||||
* Strategy: Moderate bot blocking + Session-based auth
|
||||
* - Allows legitimate browsers and necessary crawlers
|
||||
* - Blocks bots from accessing sensitive ERP areas
|
||||
* - Protects routes with session/token authentication
|
||||
* - Prevents Chrome security warnings by not being too aggressive
|
||||
*/
|
||||
|
||||
// Auth configuration
|
||||
import { AUTH_CONFIG } from '@/lib/api/auth/auth-config';
|
||||
|
||||
// Create i18n middleware
|
||||
const intlMiddleware = createMiddleware({
|
||||
locales,
|
||||
@@ -114,21 +119,82 @@ function getPathnameWithoutLocale(pathname: string): string {
|
||||
return pathname;
|
||||
}
|
||||
|
||||
/**
|
||||
* 인증 체크 함수
|
||||
* 3가지 인증 방식 지원: Bearer Token/Sanctum/API-Key
|
||||
*/
|
||||
function checkAuthentication(request: NextRequest): {
|
||||
isAuthenticated: boolean;
|
||||
authMode: 'sanctum' | 'bearer' | 'api-key' | null;
|
||||
} {
|
||||
// 1. Bearer Token 확인 (쿠키에서)
|
||||
// 클라이언트에서 localStorage → 쿠키로 복사하는 방식
|
||||
const tokenCookie = request.cookies.get('user_token');
|
||||
if (tokenCookie && tokenCookie.value) {
|
||||
return { isAuthenticated: true, authMode: 'bearer' };
|
||||
}
|
||||
|
||||
// 2. Bearer Token 확인 (Authorization 헤더)
|
||||
const authHeader = request.headers.get('authorization');
|
||||
if (authHeader?.startsWith('Bearer ')) {
|
||||
return { isAuthenticated: true, authMode: 'bearer' };
|
||||
}
|
||||
|
||||
// 3. Sanctum 세션 쿠키 확인 (레거시 지원)
|
||||
const sessionCookie = request.cookies.get('laravel_session');
|
||||
if (sessionCookie) {
|
||||
return { isAuthenticated: true, authMode: 'sanctum' };
|
||||
}
|
||||
|
||||
// 4. API Key 확인
|
||||
const apiKey = request.headers.get('x-api-key');
|
||||
if (apiKey) {
|
||||
return { isAuthenticated: true, authMode: 'api-key' };
|
||||
}
|
||||
|
||||
return { isAuthenticated: false, authMode: null };
|
||||
}
|
||||
|
||||
/**
|
||||
* 라우트 타입 확인 함수들
|
||||
*/
|
||||
function isProtectedRoute(pathname: string): boolean {
|
||||
return AUTH_CONFIG.protectedRoutes.some(route =>
|
||||
pathname.startsWith(route)
|
||||
);
|
||||
}
|
||||
|
||||
function isGuestOnlyRoute(pathname: string): boolean {
|
||||
return AUTH_CONFIG.guestOnlyRoutes.some(route =>
|
||||
pathname === route || pathname.startsWith(route)
|
||||
);
|
||||
}
|
||||
|
||||
function isPublicRoute(pathname: string): boolean {
|
||||
return AUTH_CONFIG.publicRoutes.some(route => {
|
||||
// '/' 는 정확히 일치해야만 public
|
||||
if (route === '/') {
|
||||
return pathname === '/';
|
||||
}
|
||||
// 다른 라우트는 시작 일치 허용
|
||||
return pathname === route || pathname.startsWith(route + '/');
|
||||
});
|
||||
}
|
||||
|
||||
export function middleware(request: NextRequest) {
|
||||
const { pathname } = request.nextUrl;
|
||||
const userAgent = request.headers.get('user-agent') || '';
|
||||
|
||||
// Remove locale prefix for path checking
|
||||
// 1️⃣ 로케일 제거
|
||||
const pathnameWithoutLocale = getPathnameWithoutLocale(pathname);
|
||||
|
||||
// Check if request is from a bot
|
||||
// 2️⃣ Bot Detection (기존 로직)
|
||||
const isBotRequest = isBot(userAgent);
|
||||
|
||||
// Block bots from protected paths (check both with and without locale)
|
||||
// Bot Detection: Block bots from protected paths
|
||||
if (isBotRequest && (isProtectedPath(pathname) || isProtectedPath(pathnameWithoutLocale))) {
|
||||
console.log(`[Bot Blocked] ${userAgent} attempted to access ${pathname}`);
|
||||
|
||||
// Return 403 Forbidden with appropriate message
|
||||
return new NextResponse(
|
||||
JSON.stringify({
|
||||
error: 'Access Denied',
|
||||
@@ -145,16 +211,59 @@ export function middleware(request: NextRequest) {
|
||||
);
|
||||
}
|
||||
|
||||
// Run i18n middleware for locale detection and routing
|
||||
// 3️⃣ 정적 파일 제외
|
||||
if (
|
||||
pathname.includes('/_next/') ||
|
||||
pathname.includes('/api/') ||
|
||||
pathname.match(/\.(ico|png|jpg|jpeg|svg|gif|webp)$/)
|
||||
) {
|
||||
return intlMiddleware(request);
|
||||
}
|
||||
|
||||
// 4️⃣ 인증 체크
|
||||
const { isAuthenticated, authMode } = checkAuthentication(request);
|
||||
|
||||
// 5️⃣ 게스트 전용 라우트 (로그인/회원가입)
|
||||
if (isGuestOnlyRoute(pathnameWithoutLocale)) {
|
||||
// 이미 로그인한 경우 대시보드로
|
||||
if (isAuthenticated) {
|
||||
console.log(`[Already Authenticated] Redirecting to /dashboard from ${pathname}`);
|
||||
return NextResponse.redirect(new URL(AUTH_CONFIG.redirects.afterLogin, request.url));
|
||||
}
|
||||
// 비로그인 상태면 접근 허용
|
||||
return intlMiddleware(request);
|
||||
}
|
||||
|
||||
// 6️⃣ 공개 라우트 (명시적으로 지정된 경우만)
|
||||
if (isPublicRoute(pathnameWithoutLocale)) {
|
||||
return intlMiddleware(request);
|
||||
}
|
||||
|
||||
// 7️⃣ 기본 정책: 모든 페이지는 인증 필요
|
||||
// guestOnlyRoutes와 publicRoutes가 아닌 모든 경로는 보호됨
|
||||
if (!isAuthenticated) {
|
||||
console.log(`[Auth Required] Redirecting to /login from ${pathname}`);
|
||||
|
||||
const url = new URL('/login', request.url);
|
||||
url.searchParams.set('redirect', pathname);
|
||||
return NextResponse.redirect(url);
|
||||
}
|
||||
|
||||
// 8️⃣ 인증 모드 로깅 (디버깅용)
|
||||
if (isAuthenticated) {
|
||||
console.log(`[Authenticated] Mode: ${authMode}, Path: ${pathname}`);
|
||||
}
|
||||
|
||||
// 9️⃣ i18n 미들웨어 실행
|
||||
const intlResponse = intlMiddleware(request);
|
||||
|
||||
// Add security headers to the response
|
||||
// 🔟 보안 헤더 추가
|
||||
intlResponse.headers.set('X-Robots-Tag', 'noindex, nofollow, noarchive, nosnippet');
|
||||
intlResponse.headers.set('X-Content-Type-Options', 'nosniff');
|
||||
intlResponse.headers.set('X-Frame-Options', 'DENY');
|
||||
intlResponse.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
|
||||
|
||||
// Log bot access attempts (for monitoring)
|
||||
// Bot 로깅 (모니터링용)
|
||||
if (isBotRequest) {
|
||||
console.log(`[Bot Allowed] ${userAgent} accessed ${pathname}`);
|
||||
}
|
||||
@@ -172,12 +281,13 @@ export function middleware(request: NextRequest) {
|
||||
export const config = {
|
||||
matcher: [
|
||||
/*
|
||||
* Match all request paths except:
|
||||
* Match all pathnames except:
|
||||
* - api routes
|
||||
* - _next/static (static files)
|
||||
* - _next/image (image optimization files)
|
||||
* - favicon.ico (favicon file)
|
||||
* - public files (images, etc.)
|
||||
* - favicon.ico, robots.txt
|
||||
* - files with extensions (images, etc.)
|
||||
*/
|
||||
'/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp|ico)$).*)',
|
||||
'/((?!api|_next/static|_next/image|favicon.ico|.*\\..*|robots\\.txt).*)',
|
||||
],
|
||||
};
|
||||
1
tsconfig.tsbuildinfo
Normal file
1
tsconfig.tsbuildinfo
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user