Nextjs 全局 api 调用

Question

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

谢谢！

Answer 1

简单回答：使用cookie，代码参考https://github.com/nextjs-boilerplate/next.js-boilerplatehttps://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.客户端获取：使用获取选项option.credentials = 'include' 和option.headers.Cookie=document.cookie 会将cookie 修补到您的请求中。 Bnd 当取回结果时，这变成了连线，您无法访问 cookie 标头，因此您必须使用后端逻辑中所需的另一个标头和附加逻辑，例如 res.header('custom-set-cookie', res.getHeader('set-cookie'))

2.服务器端获取：首先需要express请求对象，获取req.headers.cookie之类的cookie，然后将其打包到获取请求选项中。取回时，获取像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 loginhttp://nextjs.i18ntech.com/login