Next.js中getServerSideProps获取token cookie返回undefined问题求解

问题原因 #

你设置Cookie的代码存在语法错误，配置项传参位置错误导致Token Cookie根本没有被正确写入浏览器，因此后续请求中自然无法读取到对应的token字段。

cookie.serialize方法接收3个参数，分别是Cookie名称、Cookie值、配置项，你当前将配置项单独传给了res.setHeader，配置完全未生效。

修复步骤 #

1. 修正登录接口Cookie设置逻辑 #

将原登录接口中设置Set-Cookie的代码替换为如下内容：

res.setHeader('Set-Cookie',
    cookie.serialize('token', data.jwt, {
        httpOnly: true,
        maxAge: 60 * 60 * 24 * 7,
        sameSite: 'strict',
        path: '/',
        // 开发环境下HTTP协议无需开启secure，生产环境HTTPS自动开启
        secure: process.env.NODE_ENV === 'production'
    })
)

2. 补充无Token时的跳转逻辑 #

在Dashboard的getServerSideProps中增加无Token时的跳转判断，避免无效请求：

export async function getServerSideProps({ req, res }) {
    const { token } = parseCookies(req)
    // 无Token直接跳转登录页
    if (!token) {
        return {
            redirect: {
                destination: '/login',
                permanent: false
            }
        }
    }

    const fetchRes = await fetch(`${API_URL}/events/me`,
        {
            method: 'GET',
            headers: {
                Authorization: `Bearer ${token}`
            }
        })

    const events = await fetchRes.json()

    return {
        props: {
            events
        }
    }
}

3. 本地验证 #

修复后清空浏览器现有Cookie，重新登录后再访问Dashboard页面即可正常读取到Token。

内容的提问来源于stack exchange，提问作者Christopher B