javascript - Nextjs 全局 api 调用

Question

我正在使用 NEXT.js, 开发基于 React 的 Web 应用程序。如 NEXT.js, 中指定在页面加载之前获取数据的文档，我将所需的操作调度代码放入特定页面的 getInitialProps 中。但是一些数据获取调用(操作调度)(例如获取经过身份验证的用户数据)对于所有页面都是通用的，因此有什么方法可以在页面加载之前从单个位置调度此类操作。

谢谢!

Answer 1

更新，现在您可以使用getServerSideProps和nextjs提供了一种获取用户cookie的简单方法:How to use cookie inside `getServerSideProps` method in Next.js?

---------旧答案---------

简单回答:使用cookie，代码引用https://github.com/nextjs-boilerplate/next.js-boilerplate https://github.com/nextjs-boilerplate/next-fetch

--详细信息--

当我第一次采用 next.js 时，我也遇到了同样的问题，因为它在 React 中工作，人们更喜欢使用 token 来标记经过身份验证的用户，并且 fetch 始终在前端运行。但随着 next.js 使 ssr 成为内置功能，我尝试并发现通过 cookie 进行身份验证是可能的，然后我开始 https://github.com/nextjs-boilerplate/next.js-boilerplate并根据 cookie https://github.com/nextjs-boilerplate/next-fetch 拆分出一个 fetch

--它是如何工作的--

1.客户端获取:使用获取选项 option.credentials = 'include' 和 option.headers.Cookie=document.cookie 将 cookie 修补到您的请求中。而且当取回结果时，这会变得连线，您无法访问 cookie header ，因此您必须使用另一个 header 以及后端逻辑中所需的其他逻辑，例如 res.header('custom-set-cookie', res.getHeader( 'set-cookie'))

2.服务器端获取:首先需要快速请求对象，并获取像req.headers.cookie这样的cookie，然后将其打包到获取请求选项中。当取回时，获取类似 r.headers._headers[cookieHeaderName] 的 cookie 并打包到响应 res.header('set-cookie', setCookie)

然后你把这个传输打包后，你只需调用一个json api，cookie就会自动传输。如果您不需要通过 header 更改cookie(可以通过js)，则可以省略额外的句柄，例如 res.header('custom-set-cookie', res.getHeader('set-cookie' )) 在 API 中

您可以在这里尝试我的ssr登录http://nextjs.i18ntech.com/login