reactjs 无法使用Next.js服务器端操作删除cookie

jexiocij 于 2023-06-29 发布在 React

关注(0)|答案(2)|浏览(145)

bounty还有16小时到期。此问题的答案有资格获得+50声望奖励。hantoren希望引起更多关注这个问题。

我尝试使用Next.js应用程序中的next/headers模块删除cookie，但它似乎无法按预期工作。下面是代码片段：

import {cookies} from "next/headers";
export default async function Signout() {
    async function deleteTokens() {
       "use server"

        cookies().delete('accessToken')
    }

  await deleteTokens()
  return (
      <></>
  );
}

我期望cookie（）.delete（'accessToken'）行删除名为“accessToken”的cookie，但似乎没有任何效果。该cookie在函数执行后仍然存在。
我收到以下错误：错误：只能在服务器操作或路由处理程序中修改Cookie。阅读更多：https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options
但是我已经设置了“使用服务器”，并在next.config.js中启用了它。

使用Next.js 13.4.4

reactjs

来源：https://stackoverflow.com/questions/76509197/unable-to-delete-cookie-using-next-js-server-side-action

2条答案

按热度按时间

nimxete21#

也许你需要在动作上使用set方法。从这里
很高兴知道：.set（）仅在服务器操作或路由处理程序中可用
要“删除”cookie，您必须设置一个新的cookie名称和一个空值。您也可以将maxAge设置为0以立即使cookie过期。
来自相同文档的示例：

'use server'
 
import { cookies } from 'next/headers'
 
async function create(data) {
  cookies().set({
    name: 'name',
    value: '',
    expires: new Date('2016-10-05'),
    path: '/', // For all paths
  })
}

from this issue，可能在13.4.2之后

赞(0）回复(0）举报 2023-06-29

qyzbxkaa2#

这里的问题是，您的函数作为服务器组件的一部分运行，而不是作为服务器操作运行。您可以将函数作为服务器操作执行，方法是将其传递给客户端组件，然后在页面加载时从客户端组件调用它。

// app/signout/page.js

import { cookies } from "next/headers";

import SignOutAction from "./SignOutAction";

export default async function SignOut() {
  async function deleteTokens() {
    "use server";

    cookies().delete("accessToken");
  }

  return <SignOutAction deleteTokens={deleteTokens} />;
}

// app/signout/SignOutAction.js

"use client";

import { useEffect, useRef } from "react";

export default function SignOutAction({ deleteTokens }) {
  const deleteTokensRef = useRef(deleteTokens);

  useEffect(() => {
    deleteTokensRef.current = deleteTokens;
  });

  useEffect(() => {
    deleteTokensRef.current();
  }, []);

  return null;
}

P.S.这与您最初的问题没有直接关系，但此实现容易出现CSRF漏洞-https://security.stackexchange.com/questions/62769/should-login-and-logout-action-have-csrf-protection

赞(0）回复(0）举报 2023-06-29

我来回答

reactjs 无法使用Next.js服务器端操作删除cookie

使用Next.js 13.4.4

2条答案

相关问题

热门标签

最新问答