我正在try 将用户重定向到基于角色的特定页面,方法是使用midleware.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"
    ],
} */

根据我从文档中了解到的信息,它将在所有路由上运行,但我收到以下错误:

未捕获语法错误:意外标记‘<

enter image description here

但是,如果我将匹配器包含在中间件文件中,它将按预期工作:

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

有没有解决这个错误的办法?或者只是将所有页面添加到匹配器数组中?

推荐答案

当他们说每个请求都运行middleware而不是matcher时,它包括获取所有内容的请求,包括图标、JavaScript文件、CSS文件……正如你在doc号公路上看到的那样.

你,在你的if声明中,你说,任何不是以'/admin"开头的东西,都应该重定向到'/admin".因此,当浏览器请求这些JavaScript文件时,您将对其进行重定向,这会导致发送一个HTML文件.这就是问题所在.

使用匹配器,您不会阻止浏览器访问构建页面所需的文件,并且只在以下路径上限定中间件的范围:

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

Javascript相关问答推荐

使用JavaScript重命名对象数组中的键

使用typeof运算符获取对象值类型-接收字符串而不是数组

我不知道为什么我的JavaScript没有验证我的表单

微软Edge编辑和重新发送未显示""

单击ImageListItemBar的IconButton后,在Material—UI对话框中显示图像

setcallback是什么时候放到macrotask队列上的?

如何通过使用vanilla JS限制字体大小增加或减少两次来改变字体大小

使用POST请求时,Req.Body为空

NG/Express API路由处理程序停止工作

在JS中动态创建对象,并将其追加到HTML表中

为什么在函数中添加粒子的速率大于删除粒子的速率?

在GraphQL解析器中修改上下文值

为什么NULL不能在构造函数的.Prototype中工作

如何让SVG图标在被点击和访问后改变 colored颜色 ,并在被访问后取消点击时恢复到原来的 colored颜色 ?

是否设置以JavaScript为背景的画布元素?

在单击按钮时生成多个表单时的处理状态

在Puppeteer中使用promise进行日志(log)记录时出现TargetCloseError

使用Library chart.js在一个带有两个y轴的图表中绘制两个数据集

使用VITE开发服务器处理错误

需要从对象生成列表