forbidden

forbidden 함수는 Next.js 403 에러 페이지를 렌더링하는 에러를 발생시킵니다. 애플리케이션에서 인가(authorization) 에러를 처리할 때 유용합니다. forbidden.js 파일을 사용하여 UI를 커스터마이징할 수 있습니다.

forbidden을 사용하려면 next.config.js 파일에서 실험적인 authInterrupts 구성 옵션을 활성화해야 합니다.

next.config.ts

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    authInterrupts: true,
  },
}
 
export default nextConfig

next.config.js

module.exports = {
  experimental: {
    authInterrupts: true,
  },
}

forbidden은 Server Components, Server Functions, 그리고 Route Handlers에서 호출할 수 있습니다.

app/auth/page.tsx

import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'
 
export default async function AdminPage() {
  const session = await verifySession()
 
  // 사용자가 'admin' 역할을 가지고 있는지 확인
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // 인가된 사용자를 위해 관리자 페이지 렌더링
  return <></>
}

app/auth/page.js

import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'
 
export default async function AdminPage() {
  const session = await verifySession()
 
  // 사용자가 'admin' 역할을 가지고 있는지 확인
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // 인가된 사용자를 위해 관리자 페이지 렌더링
  return <></>
}

Good to know

forbidden 함수는 root layout에서 호출할 수 없습니다.

Examples

Role-based route protection

forbidden을 사용하여 사용자 역할에 따라 특정 라우트에 대한 접근을 제한할 수 있습니다. 이는 인증되었지만 필요한 권한이 없는 사용자가 라우트에 접근할 수 없도록 보장합니다.

app/admin/page.tsx

import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'
 
export default async function AdminPage() {
  const session = await verifySession()
 
  // 사용자가 'admin' 역할을 가지고 있는지 확인
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // 인가된 사용자를 위해 관리자 페이지 렌더링
  return (
    <main>
      <h1>Admin Dashboard</h1>
      <p>Welcome, {session.user.name}!</p>
    </main>
  )
}

app/admin/page.js

import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'
 
export default async function AdminPage() {
  const session = await verifySession()
 
  // 사용자가 'admin' 역할을 가지고 있는지 확인
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // 인가된 사용자를 위해 관리자 페이지 렌더링
  return (
    <main>
      <h1>Admin Dashboard</h1>
      <p>Welcome, {session.user.name}!</p>
    </main>
  )
}

Mutations with Server Actions

Server Actions에서 뮤테이션을 구현할 때, forbidden을 사용하여 특정 역할을 가진 사용자만 민감한 데이터를 업데이트하도록 허용할 수 있습니다.

app/actions/update-role.ts

'use server'
 
import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'
import db from '@/app/lib/db'
 
export async function updateRole(formData: FormData) {
  const session = await verifySession()
 
  // 관리자만 역할을 업데이트할 수 있도록 보장
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // 인가된 사용자를 위해 역할 업데이트 수행
  // ...
}

app/actions/update-role.js

'use server'
 
import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'
import db from '@/app/lib/db'
 
export async function updateRole(formData) {
  const session = await verifySession()
 
  // 관리자만 역할을 업데이트할 수 있도록 보장
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // 인가된 사용자를 위해 역할 업데이트 수행
  // ...
}

Version History

Version	Changes
`v15.1.0`	`forbidden` 도입됨.

User Agent Refresh