如何在 NextJS 13 客户端设置 cookie？

Question

我正在开发一个允许学生和教师登录的网站。到目前为止，只有学生登录部分生成 JWT，我正在尝试到达受保护的路由/student。您可以在此处查看代码：

https://github.com/shivpreet16/event-junction

我正在发送根据匹配响应标头中的凭据生成的 JWT，如下所示/api/submit.js：

if (auth.checkPass(rowvals[0].stu_pass, data)) {
            const token=({
              token: jwt.sign(
                {
                  username: rowvals[0].stu_email,
                  admin: true,
                },
                KEY
              ),
            });
            // console.log(token)
            res.setHeader('Content-Type', 'application/json')
            res.setHeader('Authorization', token)
            res.setHeader("Set-Cookie",'token=${token}; Max-Age=604800; SameSite=Strict');
            res.setHeader("Path", '/student' );
            // res.status(200).json({ message: "Login successful" });
            res.send(JSON.stringify({ message: 'Logged in'}))
          } else res.send(JSON.stringify({ message: "Wrong Password" }));
        } else {
          res.send(err.message);
        }

然后，我从客户端的响应标头接收 JWT /components/Login.js，并尝试使用文件setTokenCookie(token)中的函数将其设置在 cookie 中/utils/auth.js。

const token = response.headers.get('Authorization')
        if(token){
            console.log("Login successful")
            setTokenCookie(token)
            console.log(getTokenCookie())
            router.push(response.headers.get('Path'))
        }
        else{
            const info = await response.json()
            console.log(info.message)
        }

然而，getTokenCookie()函数（也在 中/utils/auth.js）不断返回null。我知道 JWT 令牌在记录时从响应标头到达客户端Login successful。然而，cookie 为空。

请帮忙

Answer 1

您可以next-13在 api 函数中使用cookies-next. Cookie是在用户登录时生成的。因此，当您将凭据发送到后端时，在验证凭据后，您可以设置 cookie

import { setCookie } from "cookies-next";

setCookie("cookieKey", value, { req, res, maxAge: 60 * 6 * 24 });

然后就可以在客户端访问cookie了

  import { getCookie } from "cookies-next";

  const cookie = getCookie("cookieKey");