غير مصرح به (unauthorized)

تقوم دالة unauthorized برمي خطأ يعرض صفحة خطأ 401 في Next.js. وهي مفيدة للتعامل مع أخطاء التصريح في تطبيقك. يمكنك تخصيص واجهة المستخدم باستخدام ملف unauthorized.js.

لبدء استخدام unauthorized، قم بتمكين خيار التكوين التجريبي authInterrupts في ملف next.config.js الخاص بك:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    authInterrupts: true,
  },
}

export default nextConfig

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

يمكن استدعاء unauthorized في مكونات الخادم (Server Components)، أفعال الخادم (Server Actions)، ومعالجات المسار (Route Handlers).

import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'

export default async function DashboardPage() {
  const session = await verifySession()

  if (!session) {
    unauthorized()
  }

  // عرض لوحة التحكم للمستخدمين المصادق عليهم
  return (
    <main>
      <h1>Welcome to the Dashboard</h1>
      <p>Hi, {session.user.name}.</p>
    </main>
  )
}

import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'

export default async function DashboardPage() {
  const session = await verifySession()

  if (!session) {
    unauthorized()
  }

  // عرض لوحة التحكم للمستخدمين المصادق عليهم
  return (
    <main>
      <h1>Welcome to the Dashboard</h1>
      <p>Hi, {session.user.name}.</p>
    </main>
  )
}

معلومات مفيدة

لا يمكن استدعاء دالة unauthorized في تخطيط الجذر (root layout).

أمثلة

عرض واجهة تسجيل الدخول للمستخدمين غير المصادق عليهم

يمكنك استخدام دالة unauthorized لعرض ملف unauthorized.js مع واجهة تسجيل الدخول.

import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'

export default async function DashboardPage() {
  const session = await verifySession()

  if (!session) {
    unauthorized()
  }

  return <div>Dashboard</div>
}

import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'

export default async function DashboardPage() {
  const session = await verifySession()

  if (!session) {
    unauthorized()
  }

  return <div>Dashboard</div>
}

import Login from '@/app/components/Login'

export default function UnauthorizedPage() {
  return (
    <main>
      <h1>401 - غير مصرح به</h1>
      <p>يرجى تسجيل الدخول للوصول إلى هذه الصفحة.</p>
      <Login />
    </main>
  )
}

import Login from '@/app/components/Login'

export default function UnauthorizedPage() {
  return (
    <main>
      <h1>401 - غير مصرح به</h1>
      <p>يرجى تسجيل الدخول للوصول إلى هذه الصفحة.</p>
      <Login />
    </main>
  )
}

التعديلات مع أفعال الخادم (Server Actions)

يمكنك استدعاء unauthorized في أفعال الخادم للتأكد من أن المستخدمين المصادق عليهم فقط يمكنهم تنفيذ تعديلات معينة.

'use server'

import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'
import db from '@/app/lib/db'

export async function updateProfile(data: FormData) {
  const session = await verifySession()

  // إذا لم يكن المستخدم مصادقًا عليه، قم بإرجاع 401
  if (!session) {
    unauthorized()
  }

  // المتابعة مع التعديل
  // ...
}

'use server'

import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'
import db from '@/app/lib/db'

export async function updateProfile(data) {
  const session = await verifySession()

  // إذا لم يكن المستخدم مصادقًا عليه، قم بإرجاع 401
  if (!session) {
    unauthorized()
  }

  // المتابعة مع التعديل
  // ...
}

جلب البيانات مع معالجات المسار (Route Handlers)

يمكنك استخدام unauthorized في معالجات المسار للتأكد من أن المستخدمين المصادق عليهم فقط يمكنهم الوصول إلى النقطة النهائية.

import { NextRequest, NextResponse } from 'next/server'
import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'

export async function GET(req: NextRequest): Promise<NextResponse> {
  // التحقق من جلسة المستخدم
  const session = await verifySession()

  // إذا لم تكن هناك جلسة، قم بإرجاع 401 وعرض unauthorized.tsx
  if (!session) {
    unauthorized()
  }

  // جلب البيانات
  // ...
}

import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'

export async function GET() {
  const session = await verifySession()

  // إذا لم يكن المستخدم مصادقًا عليه، قم بإرجاع 401 وعرض unauthorized.tsx
  if (!session) {
    unauthorized()
  }

  // جلب البيانات
  // ...
}

سجل الإصدارات

الإصدار	التغييرات
`v15.1.0`	تم تقديم `unauthorized`.

unauthorized.js

مرجع API لملف unauthorized.js الخاص.