如何在客户端设置一个cookie在NextJS 13?

Question

我在一个允许学生和教师登录的网站上工作。到目前为止，只有学生登录部分生成JWT，我试图到达受保护的路由/student。你可以在这里查看代码:

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

我将在/api/submit.js的响应头中匹配凭据生成的JWT发送为:

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);
}

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

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中，您可以使用cookies-next在api函数中设置cookie。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");