forbidden

此功能目前為實驗性質，可能會變更，不建議用於生產環境。請試用並在 GitHub 上分享您的意見回饋。

forbidden 函式會拋出錯誤，以渲染 Next.js 403 錯誤頁面。它適用於處理應用程式中的授權錯誤。您可以使用 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

forbidden 可以在伺服器元件、伺服器動作和路由處理器中調用。

app/auth/page.tsx

import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'
 
export default async function AdminPage() {
  const session = await verifySession()
 
  // Check if the user has the 'admin' role
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // Render the admin page for authorized users
  return <></>
}

要知道

forbidden 函式無法在根版面配置中調用。

範例

基於角色的路由保護

您可以使用 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()
 
  // Check if the user has the 'admin' role
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // Render the admin page for authorized users
  return (
    <main>
      <h1>Admin Dashboard</h1>
      <p>Welcome, {session.user.name}!</p>
    </main>
  )
}

使用伺服器動作的變更

在伺服器動作中實作變更時，您可以使用 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()
 
  // Ensure only admins can update roles
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // Perform the role update for authorized users
  // ...
}

版本歷史

版本	變更
`v15.1.0`	引入 `forbidden`。

forbidden

要知道

範例

基於角色的路由保護

使用伺服器動作的變更

版本歷史

Next Steps

forbidden.js