如何在Nextjs中将Cookie包含在获取请求中

时间:2020-02-11 12:22:21

标签: javascript reactjs cookies next.js react-cookie

考虑以下代码

Index.getInitialProps = async function({req}) {
  const res = await fetch("http://localhost/api/tiles");
  const json = await res.json();
}

假设/api/tiles端点需要访问用户上的uid cookie。 通常,一个人会做{credentials: "include"}。 但是如何在Next.js中做到这一点?

1 个答案:

答案 0 :(得分:1)

在使用React(NextJS是在ReactJS上构建的)时,您可以使用react-cookie来获取和存储在系统中的cookie。

安装react-cookie

npm install react-cookie

如果您使用版本为>= 16.8.0的Reactjs,则可以使用React钩子。

const [cookies, setCookie, removeCookie] = useCookies(['cookie-name']);

您可以使用setCookie(name, value, [options])设置cookie并使用cookie.get(name, [options])来获取cookie

因此,在您的情况下,代码应类似于

import { useCookies } from 'react-cookie';
const [cookies, setCookie] = useCookies(['name']);

Index.getInitialProps = async functon({req}) {
  cookie = cookies.get(name)
  const res = await fetch("http://localhost/api/tiles", cookie);
  const json = await res.json();
}