Nextjs- api 路由，如何从标头中删除 cookie？

Question

我有两个 API 路由，我想在其中设置两个 cookie/api/login.js并在/api/logout.js.

这是我的登录 API：

import { serialize } from 'cookie';

export default async (req, res) => {
  res.setHeader('Set-Cookie', [
    serialize('mytoken1', 'mytoken1Value', {
      path: '/',
    }),
    serialize('mytoken2', 'mytoken2Value', {
      path: '/',
    }),
  ]);

  res.writeHead(302, { Location: '/' });
  res.end();
}

这是我的注销 API：

export default async (req, res) => {
  res.removeHeader('Set-Cookie')

  res.writeHead(302, { Location: '/api/login' });
  res.end();
}

但注销不会删除 cookie，因此当我重新加载页面时，我仍然可以在_app.js ---console.log(req.headers.cookie)--- 中看到它们。您知道在这种情况下如何删除 cookie 吗？

Answer 1

因此，在对每个解决方案进行了太多挑战之后，我最终得到了这个并且效果很好：

（我有多个cookie，我必须使用nodejs方法，因为我在没有任何中间件的情况下在nextjs API路由中进行编码）

export default async (req, res) => {
  /* remove cookies from request header */
  res.setHeader('Set-Cookie', [
    serialize('mytoken1', '', {
      maxAge: -1,
      path: '/',
    }),
    serialize('mytoken2', '', {
      maxAge: -1,
      path: '/',
    }),
  ]);

  res.writeHead(302, { Location: '/api/login' });
  res.end();
}

重点是 maxAge 应该为 -1 才能使其过期。我用 Date.now() 尝试过。当您有多个 cookie 时，您必须在操作它们之后结束响应。

Answer 2

你可以这样做：

res.setHeader('Set-Cookie', 'mytoken1=deleted; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT');
res.setHeader('Set-Cookie', 'mytoken2=deleted; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT');

来源

UPD

src/pages/api/auth/signout.ts

import { NextApiHandler } from 'next';
import { NotFoundError } from 'errors/not-found-error';
import { errorHandler } from 'middlewares/error-handler';

const routeHandler: NextApiHandler = (req, res) => {
  if (req.method === 'POST') {
    res.setHeader('Set-Cookie', 'jwt=deleted; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT');
    res.send({});
  } else {
    throw new NotFoundError();
  }
};

export default errorHandler(routeHandler);

Answer 3

在 next.js api 路由中你可以尝试：

export default async(req, res) => {
    res.setHeader(
        "Set-Cookie", [
        `access=deleted; Max-Age=0; path=/`,
        `refresh=deleted; Max-Age=0; path=/`]
        );

    return res.status(200).json({
        success: 'Successfully logged out'
    });
}

或者通过使用 cookie npm 包中的 cookie.serialize 您可以尝试：

import cookie from 'cookie';
export default async(req, res) => {
    res.setHeader('Set-Cookie', [
        cookie.serialize(
            'access', '', {
                expires: new Date(0),
                path: '/'
            }
        ),
        cookie.serialize(
            'refresh', '', {
                expires: new Date(0),
                path: '/'
            }
        )
    ]);

   return res.status(200).json({
       success: 'Successfully logged out'
   });


}

在服务器端道具页面中您可以使用

export async function getServerSideProps(context) {
    context.res.setHeader(
        "Set-Cookie", [
        `access=deleted; Max-Age=0; path=/`,
        `refresh=deleted; Max-Age=0; path=/`]
        );
    return { props: { } }
}

我希望这对你有帮助。