如何在 getServerSideProps NextJS 中獲取 cookies

Question

在我的用戶頁面中，我使用getServerSideProps來獲取用戶的數據。

在第 1 號console.log中，您可以看到帶有令牌的cookies存在。 但是在 console.log 編號 2 cookies是空的

我也在useEffect中做了同樣的請求，它按我的預期工作。 在console.log編號 2 cookies object 包含令牌。

如何為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' }

Answer 1

首先使用 npm 安裝 cookie package

npm install cookie

然后在需要的地方導入

import cookie from "cookie";

並且 rest 必須類似於以下內容：

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

希望它能讓您清楚地了解如何實現它。