在Next.js Server Actions中删除Cookie的正确姿势

本文深入探讨了在Next.js应用中，使用next/headers模块通过Server Actions删除Cookie时可能遇到的问题及其解决方案。核心在于理解Server Components与Server Actions的执行上下文差异，并展示了如何通过将Server Action传递给Client Component并在客户端触发来成功删除Cookie，同时强调了相关的安全注意事项。

理解Next.js中Cookie删除的限制

在Next.js的App Router架构中，操作HTTP响应头（包括设置或删除Cookie）是一个敏感操作，必须在特定的上下文中执行。根据Next.js的官方文档，cookies().set()和cookies().delete()等方法只能在Server Actions或Route Handlers中被调用。

当你在一个Server Component中定义一个带有"use server"指令的异步函数，并尝试直接在Server Component的渲染阶段调用它时，即使该函数本身是一个Server Action，其执行上下文也可能不被视为一个独立的Server Action调用。这意味着，直接在Server Component中调用cookies().delete()将导致运行时错误，提示“Cookies can only be modified in a Server Action or Route Handler”。

示例问题代码（错误用法）:

// app/signout/page.js (Server Component)
import { cookies } from "next/headers";

export default async function Signout() {
    async function deleteTokens() {
       "use server" // 标记为Server Action

        cookies().delete('accessToken') // 在Server Component中直接调用，可能报错
    }

    // 在Server Component的渲染阶段直接调用
    await deleteTokens() 

    return (
        <></>
    );
}

上述代码的问题在于，尽管deleteTokens被标记为Server Action，但它是在Server Component的初始渲染流程中直接调用的，而不是作为由客户端触发的独立Server Action。Next.js要求Server Actions必须由客户端交互（例如表单提交、按钮点击或通过useEffect等生命周期钩子）显式触发，才能正确修改响应头。

正确的解决方案：通过客户端组件触发Server Action

为了解决这个问题，我们需要将Server Action的调用逻辑从Server Component的渲染阶段分离出来，并通过一个Client Component来触发它。这种模式确保了Server Action在正确的上下文中执行，从而允许其修改Cookie。

核心思路：

绘蛙AI修图

绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色

279

查看详情

1. 在Server Component中定义Server Action。
2. 将这个Server Action作为prop传递给一个Client Component。
3. 在Client Component中使用useEffect钩子来调用这个Server Action。

步骤一：在Server Component中定义并传递Server Action

首先，在你的Server Component（例如app/signout/page.js）中，像往常一样定义Server Action。然后，创建一个新的Client Component（例如SignOutAction.js），并将这个Server Action作为prop传递给它。

// app/signout/page.js (Server Component)
import { cookies } from "next/headers";
import SignOutAction from "./SignOutAction"; // 导入客户端组件

export default async function SignOut() {
  async function deleteTokens() {
    "use server"; // 明确标记为Server Action

    console.log("Attempting to delete accessToken cookie...");
    cookies().delete("accessToken"); // 在Server Action中删除Cookie
    console.log("accessToken cookie deletion attempted.");
  }

  // 将Server Action作为prop传递给Client Component
  return <SignOutAction deleteTokens={deleteTokens} />;
}

步骤二：在Client Component中触发Server Action

接下来，在Client Component（例如app/signout/SignOutAction.js）中，使用"use client"指令将其标记为客户端组件。然后，利用useEffect钩子在组件挂载后（或在特定依赖项变化时）调用传入的Server Action。

为了确保Server Action函数在useEffect的依赖数组中保持稳定，即使父组件重新渲染，也可以使用useRef来存储并访问该函数。这可以避免不必要的useEffect重新执行。

// app/signout/SignOutAction.js (Client Component)
"use client";

import { useEffect, useRef } from "react";

export default function SignOutAction({ deleteTokens }) {
  // 使用useRef来确保deleteTokens函数引用的稳定性
  const deleteTokensRef = useRef(deleteTokens);

  // 在每次渲染时更新ref，以防deleteTokens函数本身发生变化
  useEffect(() => {
    deleteTokensRef.current = deleteTokens;
  });

  // 组件挂载后调用Server Action
  useEffect(() => {
    console.log("Client component mounted, calling deleteTokens action...");
    deleteTokensRef.current();
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  // 此组件不需要渲染任何UI
  return null;
}

通过这种方式，deleteTokens函数作为一个真正的Server Action，在Client Component挂载后被触发。此时，Next.js会将其视为一个由客户端发起的请求，从而允许它在服务器端正确地修改响应头并删除Cookie。

注意事项与最佳实践

1. Server Action的调用上下文： 再次强调，Server Actions的强大之处在于它们可以在客户端被调用，并在服务器上执行。但它们不能仅仅因为被定义在Server Component中，就在Server Component的渲染流程中拥有修改HTTP头的权限。它们需要一个客户端触发点。
2. 安全性：CSRF防护： 当执行如注销（Sign Out）这样的敏感操作时，即使是简单的Cookie删除，也应考虑CSRF（跨站请求伪造）攻击的风险。直接在页面加载时通过useEffect触发注销操作，可能会使你的应用容易受到CSRF攻击。
   • 风险： 恶意网站可能嵌入一个指向你应用注销端点的隐藏请求（例如，一个<img>标签或一个自动提交的表单），当用户访问恶意网站时，就会自动触发你应用的注销操作，而用户毫不知情。
   • 建议： 对于注销、删除账户等操作，最佳实践是要求用户进行明确的交互，例如点击一个“注销”按钮，并且通常会结合CSRF令牌进行防护。这确保了请求是用户有意发起的，而不是被恶意网站劫持。
   • 虽然本教程解决了Cookie删除的技术问题，但在实际生产环境中，请务必为敏感操作添加CSRF防护。
3. Next.js版本： 本文的解决方案适用于Next.js 13.4.4及更高版本，特别是使用App Router的场景。
4. 用户体验： 对于注销等操作，通常会伴随页面重定向或状态更新，以向用户明确表示操作已完成。在deleteTokens Server Action执行完毕后，你可以考虑使用redirect函数（来自next/navigation）将用户重定向到登录页或其他合适页面。

总结

在Next.js中正确删除Cookie的关键在于理解Server Components和Server Actions的执行模型。虽然Server Actions允许在服务器端执行代码，但它们必须由客户端显式触发才能执行涉及HTTP响应头修改的操作。通过将Server Action作为prop传递给Client Component，并在Client Component的useEffect中调用它，可以有效地解决在Server Component中直接删除Cookie时遇到的问题。同时，务必牢记在设计敏感操作时，考虑并实施适当的安全措施，如CSRF防护。

以上就是在Next.js Server Actions中删除Cookie的正确姿势的详细内容，更多请关注php中文网其它相关文章！