javascript - שגיאת תחביר בלתי נתפסת: אסימון בלתי צפוי '<' בעת התאמת כל הנתיבים במידלוור של Next.js

אני מנסה להפנות משתמש לעמודים מסוימים על פי תפקיד, באמצעות הקוד הבא בקובץ middleware.ts

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { getToken } from 'next-auth/jwt'

export async function middleware(request: NextRequest) {
    const token = await getToken({
        req: request,
        secret: process.env.JWT_SECRET
    }) as any
    if (token !== null && token.user.role === "admin") {
        if (request.nextUrl.pathname.startsWith('/admin')) {
            return NextResponse.next()
        }
        else {
            return NextResponse.redirect(new URL('/admin', request.url))
        }
    }
}
/* export const config = {
    matcher: [
     //   "/login",
     //  "/register",
     //  "/",
     //   "/admin"
    ],
} */

ממה שהבנתי מהמסמכים זה ירוץ על כל הנתיבים, אבל אני מקבל את השגיאה הזו:

שְׁגִיאַת סִיּוּמֵי סִנְטַקְס לֹא נלכדה: סימן לא צפוי '<'

עם זאת, אם אכלול את המתאם בקובץ התיווך, זה עובד כפי שצפוי:

export const config = {
    matcher: [
       "/login",
       "/register",
       "/",
       "/admin"
    ],
}

יש תיקון לשגיאה הזו? או פשוט להוסיף את כל הדפים למערך ההתאמה?

תשובה #1

כאשר הם אומרים שמידלוור middleware ללא matcher רץ על כל בקשה, זה כולל בקשות לקבלת הכל, כולל פוויקונים, קבצי JavaScript, קבצי CSS... כפי שאתם יכולים לקרוא בתיעוד.

אתה, בתוך משפט ה-if שלך, אתה אומר, כל דבר שלא מתחיל ב-'/admin", צריך להיות מנותב מחדש ל-'/admin". כך שכאשר הדפדפן מבקש את קובצי ה-JavaScript האלה, אתה מנתב אותו מחדש, ותוצאה מכך נשלח קובץ HTML. זו הבעיה.

עם המתאם, אינך חוסם את הדפדפן מגישה לקבצים שנדרשים לבניית הדף, ואתה מגדיר את המידלוור רק על הנתיבים האלה:

export const config = {
  matcher: ["/login", "/register", "/", "/admin"],
};