如何在 getServerSideProps NextJS 中获取 cookie答案

【问题标题】：How to get cookies in getServerSideProps NextJS [duplicate]如何在 getServerSideProps NextJS 中获取 cookie
【发布时间】：2021-12-31 14:34:29
【问题描述】：

在我的用户页面中，我使用getServerSideProps 来获取用户的数据。

在console.log 1 号处，您可以看到带有标记的cookies 存在。但是在console.log 2号cookies是空的

我也在useEffect里面做了同样的请求它按我的预期工作。在console.log 2 号 cookie 对象中包含令牌。

如何为getServerSideProps请求设置cookies？

export async function getServerSideProps({req, res}) {
    console.log(1, req.cookies)
    
    const response = await $api.get(`/store/profile/user`, {withCredentials: true})
    
    return { props: {} }
}

const User: NextPage = ({props}) => {
    const getData = async () => {
        const response = await $api.get(`/store/profile/user`, {withCredentials: true})
    }
    React.useEffect(() => {
       getData()
    }, [])

    return (
        <LoginLayout>
            <ProfileLayout>
                <UserInfo />
            </ProfileLayout>
        </LoginLayout>
    )
}

export default User

export default async function refresh(req, res, next) {
    try {
        console.log(2, req.cookies)
        
        const {refreshToken} = req.cookies
        const userData = await userService.refresh(refreshToken)
        res.cookie("refreshToken", userData.refreshToken, {maxAge: 5 * 24 * 60 * 60 * 1000, httpOnly: true})
        return res.json(userData)
    } catch (e) {
        res.status(e.status).json({message: e.message})
    }
}

getServerSideProps 请求的日志：

1 {
  refreshToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InpoZW4uYWxleGVlZmZAZ21haWwuY29t',
  token:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InpoZW4uYWxleGVlZmZAZ21haWwuY29tIiThm'
}

2 {}

useEffect 中的请求日志：

2 {
  refreshToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InpoZW4uYWxleGVlZmZAZ21haWwuY29ih',
  token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InpoZW4uYWxleGVlZmZAZ21haWwuY29tIiwiaWQg'
}

【问题讨论】：

这是否回答了您的问题：Why are cookies not sent to the server via getServerSideProps in Next.js?？从服务器发出请求时，您需要将 cookie 显式传递给请求。

标签： javascript reactjs cookies next.js server-side-rendering

【解决方案1】：

首先使用 npm 安装 cookie 包

npm install cookie

然后在需要的地方导入

import cookie from "cookie";

其余的必须类似于以下内容：

export const getServerSideProps = async (context) => {
  const mycookie = cookie.parse(
    (context.req && context.req.headers.cookie) || ""
  );

  let cookieNameData = {};
  if (mycookie.whatevercookienameis) {
    cookieNameData = mycookie.whatevercookienameis;
  }

  return { 
    props: {
      cookieNameData
    } 
  }
}

希望它能让您清楚地了解如何实现它。

【讨论】：