أواجه مشكل في إستخدام الدوال الوسيطة في next-intel

محمود سعداوي2 · 20 أكتوبر

السلام عليكم.

نبذة عن المشروع: عبارة عن قائمة مهام باستخدام nextjs typescript postegres prisma.

المستخدم المسجل هو فقط من يمكنه إضافة مهمة

بنية المشروع:

src
|_ app
  |_[locale]
  |_api
	|_taskaties
middleware.ts
i18n.ts

taskaties/route.ts

export async function GET (request: NextRequest) {
    try {
        const user = verifyToken(request)
        if (!user) {
            return NextResponse.json({message: "Access Denied!"}, {status: 401})
        }

        const tasks = await prisma.task.findMany()

        return NextResponse.json(tasks, {status: 201})
    } catch (error) {
        console.error("Error: ", error)
        return NextResponse.json({
            message: "Internal Server Error"
        }, { status: 500 })
    }
}

middleware.ts

1.

export const config = {
    matcher: ['/((?!api|_next|.*\\..*).*)', '/api/taskaties/*],
}

 export function middleware (request: NextRequest) {
     const token = request.cookies.get('jwtToken')?.value
     if (!token) {
         if (request.nextUrl.pathname.startsWith("/api/taskaties")) {
             return NextResponse.json(
                 { message: 'No Token Provided, Access Denied!' },
                 { status: 401 }
             )
         }
     }

     return NextResponse.next()
 }

 export default createMiddleware({
     locales: ["en", "fr", "ar"],
     defaultLocale: "ar",
 });

في هذه الحالة يتم جلب المهام من قاعدة البيانات غير أنه لايتم التعرف على الواجهات ويتم إرجاع صفحة notFound

2. قمت بتعديل الكود ليصير كالتالي

export const config = {
    matcher: ['/((?!api|_next|.*\\..*).*)'],
}

export function middleware(request: NextRequest) {
    const token = request.cookies.get('jwtToken')?.value;
  
    if (!token && request.nextUrl.pathname.startsWith("/api/taskaties")) {
      return NextResponse.json(
        { message: 'No Token Provided, Access Denied!' },
        { status: 401 }
      );
    }
  
    return createMiddleware({
      locales: ["en", "fr", "ar"],
      defaultLocale: "en",
    })(request);
  }

غير أ،ه في هذه الحالة عندما لا يكون لدي token يتم إرجاع `{message: "Access Denied!"}, {status: 401}` عوضا عن `{ message: 'No Token Provided, Access Denied!' }` وبالتالي لم يتم تفعيل الدوال الوسيطة التي تهدف للتحقق من المستخدم.

شكرا

Mustafa Mahmoud7 · 20 أكتوبر

الحالة الأولى الطبقة الوسيطة وملف taskaties/route.ts ليس به مشكلة يبدو أن المسارات الأخرى الخاصة بواجهات المستخدم لا تعمل بشكل صحيح وتعيد صفحة notFound.

الحالة الثانية المشكلة تكمن في هذا الإعداد config

export const config = {
    matcher: ['/((?!api|_next|.*\\..*).*)'],
}

يستثني جميع المسارات التي تبدأ بـ /api أو / _next ولا يتم تفعيل الطبقة الوسيطة عليها أبدا حيث أن الملف taskaties بداخل مجلد api ونحن نريد الطبقة الوسيطة مع التأكد من أن المسار يبدأ api/taskaties/

if (!token && request.nextUrl.pathname.startsWith("/api/taskaties")) {
                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
/*باقي الكود*/
}

لذلك نقوم بتغيير الإعداد config وتعديله لكي لا يتم استثناء تطبيق الطبقة الوسيطة على أي مسار يبدأ بـ api/ كالأتي

export const config = {
  matcher: ['/((?!_next|.*\\..*).*)'], // إزالة استثناء `/api`
};

مع تعديل الطبقة الوسيطة لتصبح كالأتي

export const config = {
  matcher: ['/((?!_next|.*\\..*).*)'], // إزالة استثناء `/api`
};

export function middleware(request: NextRequest) {
    const token = request.cookies.get('jwtToken')?.value;
    if (!token && request.nextUrl.pathname.startsWith("/api/taskaties")) {
        return NextResponse.json(
            { message: 'No Token Provided, Access Denied!' },
            { status: 401 }
        );
    }

    // السماح لبقية الطلبات بالمرور
    return NextResponse.next();
}

export default createMiddleware({
    locales: ["en", "fr", "ar"],
    defaultLocale: "ar",
});

محمود سعداوي2 · 21 أكتوبر

بتاريخ 12 ساعة قال Mustafa Mahmoud7:
الحالة الأولى الطبقة الوسيطة وملف taskaties/route.ts ليس به مشكلة يبدو أن المسارات الأخرى الخاصة بواجهات المستخدم لا تعمل بشكل صحيح وتعيد صفحة notFound.

الحالة الثانية المشكلة تكمن في هذا الإعداد config
export const config = {
    matcher: ['/((?!api|_next|.*\\..*).*)'],
}
يستثني جميع المسارات التي تبدأ بـ /api أو / _next ولا يتم تفعيل الطبقة الوسيطة عليها أبدا حيث أن الملف taskaties بداخل مجلد api ونحن نريد الطبقة الوسيطة مع التأكد من أن المسار يبدأ api/taskaties/
if (!token && request.nextUrl.pathname.startsWith("/api/taskaties")) {
                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
/*باقي الكود*/
}
  
  
لذلك نقوم بتغيير الإعداد config وتعديله لكي لا يتم استثناء تطبيق الطبقة الوسيطة على أي مسار يبدأ بـ api/ كالأتي
export const config = {
  matcher: ['/((?!_next|.*\\..*).*)'], // إزالة استثناء `/api`
};
مع تعديل الطبقة الوسيطة لتصبح كالأتي
export const config = {
  matcher: ['/((?!_next|.*\\..*).*)'], // إزالة استثناء `/api`
};

export function middleware(request: NextRequest) {
    const token = request.cookies.get('jwtToken')?.value;
    if (!token && request.nextUrl.pathname.startsWith("/api/taskaties")) {
        return NextResponse.json(
            { message: 'No Token Provided, Access Denied!' },
            { status: 401 }
        );
    }

    // السماح لبقية الطلبات بالمرور
    return NextResponse.next();
}

export default createMiddleware({
    locales: ["en", "fr", "ar"],
    defaultLocale: "ar",
});

شكرا

مفس الشيء.

هذه رسالة الخطأ

Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale. The `notFound()` function will be called as a result.

أواجه مشكل في إستخدام الدوال الوسيطة في next-intel

السؤال

محمود سعداوي2

2 أجوبة على هذا السؤال

Recommended Posts

Mustafa Mahmoud7

محمود سعداوي2

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية