在next js 14中删除cookie的问题

Question

我想知道为什么 next js 中的 request.cookies.delete 不起作用，我已经使用了 noookies 库，next/headers 中的 cookies，但它仍然不起作用。我的代码是这样的：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export async function middleware(request: NextRequest) {
    const hasCookie = request.cookies.has("token")
    const cookie = request.cookies.get("token")
    const url = process.env.URL

    if(cookie){
      const getCookie = cookie.value
      const res = NextResponse.next()

      const response = await fetch(`${url}/verifyExpToken`, {
        method: "POST",
        headers: {
          "Authorization": `Bearer ${getCookie}`
        }
      })

      const data = await response.json()

      if(data.error){
        request.cookies.delete("token")
        return NextResponse.redirect(new URL('/login', request.url))
      }
  }

  if(!hasCookie){
    return NextResponse.redirect(new URL('/signIn', request.url))
  }
}
 
export const config = {
  matcher: ["/home", "/cart", "/contact", "/exploreCourses", "/plains"]
}

它甚至最终进入重定向并重定向到登录，因为令牌实际上已经过期，但我查看了检查元素并查看了应用程序选项卡，然后我转到了 cookie，它仍然在那里，我不知道发生了什么事，直到前天它还在工作哈哈

Answer 1

我在阅读了有关next和中间件的一些内容、查阅文档后得到了它，request.cookies仅从到达它的请求中删除cookie，而不是从浏览器中删除cookie，即使它刷新页面，也只有那些从浏览器中删除它的人浏览器是response，也就是nextResponse，因为中间件接收到请求，到浏览器的是response，所以只会通过response反映浏览器中cookie的删除，代码如下。

import { NextResponse, NextRequest} from 'next/server'

function verifyToken(request: NextRequest){
  const hasCookie = request.cookies.has("token")

  if(!hasCookie){
    return NextResponse.redirect(new URL("/login", request.url))
  }
}
 
export async function middleware(request: NextRequest) {
  const cookieValue = request.cookies.get("token")?.value
  const url = process.env.URL

  const verifyExpToken = await fetch(`${url}/verifyExpToken`, {
    method: "POST",
    headers: {
      "Authorization":  `Bearer ${cookieValue}`
    }
  })

  const verifyExpTokenError = await verifyExpToken.json()

  const response = NextResponse.next()

  if(verifyExpTokenError.error){
    response.cookies.delete("token")
    verifyToken(request)
  }
  return response
}
export const config = {
  matcher: ["/home", "/cart", "/contact", "/exploreCourses", "/plains"]
}

请注意，我在删除 cookie 后重定向了用户，因为他应该再次登录，但通过中间件，我仅使用 return NextResponse 重定向用户，但要删除 cookie，您需要返回它，以便它可以继续到浏览器，但是如何重定向并将响应返回到浏览器，两者都是返回，并且在javascript返回之后无法添加更多代码，我创建了一个重定向的函数，并在它返回响应之后，因为该功能超出了中间件的范围。