javascript - Nextjs 全局 api 调用

Question

我正在使用NEXT.js 开发基于反应的 Web 应用程序， . 正如NEXT.js 中指定的，在页面加载之前获取数据的文档，我将所需的操作调度代码放在特定页面的 getInitialProps 中。但是一些数据获取调用（动作调度）比如获取经过身份验证的用户的数据对于所有页面都是通用的，所以有没有办法在页面加载之前从一个地方调度这些动作。

谢谢！

Answer 1

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

- 细节 -

当我第一次采用时，我有同样的问题next.js，因为它在反应中起作用，人们更喜欢使用令牌来标记经过身份验证的用户，并且 fetch 总是在前端运行。但是作为next.js内置ssr功能，我尝试并发现通过 cookie 进行身份验证是可能的，我开始https://github.com/nextjs-boilerplate/next.js-boilerplate并根据 cookie https://拆分提取github.com/nextjs-boilerplate/next-fetch

- 这个怎么运作 -

1.client side fetch：使用 fetch 选项option.credentials = 'include'并将option.headers.Cookie=document.cookiecookie 修补到您的请求中。Bnd 当取回结果时，这变成了有线的，您无法访问 cookie 标头，因此您必须使用后端逻辑中所需的另一个标头和附加逻辑，例如res.header('custom-set-cookie', res.getHeader('set-cookie'))

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

然后在你打包这个传输之后，你可以简单地调用一个json api，cookie会自动传输。如果你不需要通过header改变cookie（你可以通过js），你可以像res.header('custom-set-cookie', res.getHeader('set-cookie'))api中一样省略额外的句柄

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