Protect a page
내 서비스 화면을 로그인과 역할로 보호하는 순서를 따라 합니다.
내 서비스에 /reports 화면을 만들고, 로그인한 사람만 볼 수 있게 한 뒤 관리자(MASTER)만 보는 영역을 나누는 과정입니다.
서비스 화면은
src/app/(service)/에 만듭니다. 킷 폴더(src/meerkit)는 수정하지 않습니다.1. Create the page
라우트 파일은 얇게 두고, 화면 본체는 클라이언트 컴포넌트로 분리합니다.
src/app/(service)/reports/
├── page.tsx 라우트 연결 (서버 컴포넌트)
└── ReportsPage.tsx 화면 본체 ("use client")app/(service)/reports/page.tsx
import { ReportsPage } from "./ReportsPage";
export default function Page() {
return <ReportsPage />;
}2. Require login
ReportsPage.tsx
"use client";
import { RequireAuth } from "@/meerkit";
export function ReportsPage() {
return (
<RequireAuth>
<h1>리포트</h1>
</RequireAuth>
);
}로그인하지 않은 사용자에게는 안내 문구와 로그인 버튼이 보입니다. 로그인하면 같은 자리에 내용이 나타납니다.
3. Split by role
같은 화면 안에서 일부만 관리자에게 보여 주려면 useAuth의 isAdmin을 씁니다. 화면 전체를 막으려면 RequireRole로 감쌉니다.
tsx
import { RequireAuth, RequireRole, ADMIN_ROLE, useAuth } from "@/meerkit";
function ReportsContent() {
const { isAdmin } = useAuth();
return (
<>
<h1>리포트</h1>
{isAdmin && <button>전체 삭제</button>} {/* 편의용 숨김 */}
</>
);
}
export function ReportsPage() {
return (
<RequireAuth>
<ReportsContent />
</RequireAuth>
);
}
// 관리자 전용 화면
export function ReportsAdminPage() {
return (
<RequireRole role={ADMIN_ROLE}>
<ReportsContent />
</RequireRole>
);
}4. Hide the link too
접근할 수 없는 메뉴를 보여 주지 않는 것이 좋습니다. 사용자 메뉴에 바로가기를 추가할 때도 역할로 걸러 주세요.
tsx
const { user, isAdmin } = useAuth();
const items = [
{ label: "리포트", href: "/reports" },
...(isAdmin ? [{ label: "전체 리포트", href: "/reports/all" }] : []),
];
<UserMenu user={user} items={items} onLogout={() => logout.mutate()} />5. Verify on the server
위 가드는 화면만 보호합니다. 리포트 데이터를 주는 API도 서버에서 로그인과 역할을 검사해야 합니다. 그렇지 않으면 주소를 직접 호출해 데이터를 볼 수 있습니다.
Checklist
- 로그아웃 상태에서
/reports를 열면 로그인 안내가 보인다 - VIEWER로 로그인하면 관리자 전용 영역이 보이지 않는다
- MASTER로 로그인하면 모두 보인다
- VIEWER 토큰으로 관리자 API를 직접 호출하면 403이 나온다 (서버 검증)