使用nextjs和中间件会导致未捕获的语法错误：意外的标记“〈”

mpgws1up 于 2023-03-18 发布在其他

关注(0)|答案(1)|浏览(176)

我在nextjs应用中写了一个中间件来重定向未认证的用户到登录页面。它重定向用户但是它导致控制台出错并且显示一个空白页面。有什么方法可以修复这个问题吗？

下面是我的中间件代码.ts文件：

import { NextResponse } from "next/server";
import type { NextRequest } from 'next/server'

export default function middleware(request: NextRequest) {
    let hasToken = request.cookies.has('token')

    if (!hasToken && !request.url.includes('/login')) {
        return NextResponse.redirect(new URL('/login', request.url))
    }
    if (hasToken && request.url.includes('/login')) {
        return NextResponse.redirect(new URL('/', request.url))
    }
    return NextResponse.next()
}

下面是控制台上的错误：

uncaught syntaxerror unexpected token '<'
删除或更改第一个条件的第二个项目，使其工作。例如：将其更改为(!hasToken && request.url.includes('/dashboard'))将工作正常。

next.js

来源：https://stackoverflow.com/questions/75733491/use-of-nextjs-and-middleware-results-in-an-uncaught-syntaxerror-unexpected-toke

1条答案

按热度按时间

eqqqjvef1#

我终于找到了答案，在nextjs（12.2）的新更新中，中间件将为项目（文档）中的每个路由调用。所以我们必须设置指定符来限制我们想要的路由。我们可以使用“matcher”或简单的“if”语句来检查路由。在我的例子中，两种方法都有效：

import { NextResponse } from "next/server";
import type { NextRequest } from 'next/server'

export default function middleware(request: NextRequest) {
    let hasToken = request.cookies.has('token')

    if (request.url.includes('_next')) return // <============

    if (!hasToken && !request.url.includes('/login')) {
        return NextResponse.redirect(new URL('/login', request.url))
    }
    if (hasToken && request.url.includes('/login')) {
        return NextResponse.redirect(new URL('/', request.url))
    }
    return NextResponse.next()
}

或使用matcher：

import { NextResponse } from "next/server";
import type { NextRequest } from 'next/server'

export default function middleware(request: NextRequest) {
    let hasToken = request.cookies.has('token')

    if (!hasToken && !request.url.includes('/login')) {
        return NextResponse.redirect(new URL('/login', request.url))
    }
    if (hasToken && request.url.includes('/login')) {
        return NextResponse.redirect(new URL('/', request.url))
    }
    return NextResponse.next()
}

export const config = { // <============ 
    matcher: '/',
  }

赞(0）回复(0）举报 2023-03-18

我来回答

使用nextjs和中间件会导致未捕获的语法错误：意外的标记“〈”

1条答案

相关问题

热门标签

最新问答