Next.js 13删除Cookie并跳转用户失效问题求助

你的问题核心是没有在重定向响应上操作Cookie——之前用NextResponse.next()只能删除Cookie但无法触发跳转，而直接返回NextResponse.redirect又没处理Cookie删除。只需调整逻辑，在重定向响应对象上完成Cookie删除即可。

修改后的src/middleware.ts代码 #

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

export async function middleware(request: NextRequest) {
  const cookie = request.cookies.get("token")?.value;
  // 先判断cookie是否存在，避免空值报错
  if (!cookie) {
    return NextResponse.redirect(new URL("/signIn", request.url));
  }

  const response = await fetch(`${request.nextUrl.origin}/api/verifycookie`, {
    method: "POST",
    headers: {
      cookies: cookie
    }
  });
  const data = await response.json();

  if (data.ExpiredToken) {
    // 1. 创建重定向到登录页的响应对象
    const redirectRes = NextResponse.redirect(new URL("/signIn", request.url));
    // 2. 在该响应上删除token Cookie
    redirectRes.cookies.delete("token");
    // 若当初设置Cookie时指定了path/domain，删除时需匹配（比如path为"/"）
    // redirectRes.cookies.delete("token", { path: "/" });
    return redirectRes;
  } else if (data.error) {
    return NextResponse.redirect(new URL("/signIn", request.url));
  }

  // Token有效时，继续请求
  return NextResponse.next();
}

export const config = {
  matcher: ["/home", "/cart", "/contact", "/exploreCourses", "/plains"]
};

关键逻辑说明 #

• 当Token过期时，先创建重定向响应，再在这个响应对象上调用cookies.delete——因为浏览器会根据响应头里的Set-Cookie指令删除Cookie，同时执行重定向。
• 若你在设置Cookie时指定了path、domain等属性，删除时必须传入完全匹配的参数（比如{ path: "/" }），否则浏览器可能无法识别删除指令。

额外优化建议 #

1. 在verifyCookie路由中，建议使用标准的Cookie请求头传递Token，而非自定义的cookies字段：

   // middleware中的fetch请求修改为
   headers: {
     "Cookie": `token=${cookie}`
   }
   // verifyCookie中获取Cookie改为
   const cookieValue = request.cookies.get("token")?.value;
   

   这样更符合HTTP规范，也避免自定义头可能带来的问题。

2. 增加Cookie存在性判断，避免当Cookie不存在时触发无效的验证请求。

内容的提问来源于stack exchange，提问作者Joao