Nextjs 全局 api 调用

Question

我正在使用 NEXT.js,. As specified in NEXT.js, 文档开发基于 React 的 Web 应用程序以在页面加载之前获取数据，我将所需的操作调度代码放入特定页面的 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 中有效，人们更喜欢使用令牌来标记授权用户并始终在 front-end 中获取 运行。但是由于 next.js 使 ssr 成为一个内置功能，我尝试并发现可以通过 cookie 进行身份验证，然后我开始 https://github.com/nextjs-boilerplate/next.js-boilerplate and split out a fetch based on cookie https://github.com/nextjs-boilerplate/next-fetch

-- 工作原理 --

1.client 侧提取：使用提取选项 option.credentials = 'include' 和 option.headers.Cookie=document.cookie 会将 cookie 修补到您的请求中。 Bnd 当取回结果时，这变成有线，你不能访问 cookie header，所以你必须使用另一个 header 和后端逻辑所需的额外逻辑，如 res.header('custom-set-cookie', res.getHeader('set-cookie'))

2.server side fetch：首先你需要express request object，然后获取cookie req.headers.cookie，然后将其打包到fetch request选项中。取回时，获取类似 r.headers._headers[cookieHeaderName] 的 cookie 并打包到响应 res.header('set-cookie', setCookie)

然后在您将此传输打包后，您只需调用 json api 即可自动传输 cookie。如果你不需要通过 header 更改 cookie（你可以通过 js），你可以省略额外的句柄，如 api

中的 res.header('custom-set-cookie', res.getHeader('set-cookie'))

你可以试试我的 ssr login 这里 http://nextjs.i18ntech.com/login