Next.js SSR 存储访问令牌而不使用 redux答案

【问题标题】：Next.js SSR store access token without using reduxNext.js SSR 存储访问令牌而不使用 redux
【发布时间】：2019-03-31 01:13:19
【问题描述】：

我已经使用 NextJS 和 ReactJS 实现了一个服务器端渲染应用程序。

当用户登录应用程序时，我想存储一些用户详细信息，例如 访问令牌、刷新令牌、电子邮件地址，并在整个应用程序中使用它。（有点像我们在客户端渲染应用程序上使用本地存储一样全局存储它）

我没有使用 REDUX，所以我想知道在不使用 REDUX 的情况下存储这些用户详细信息的最佳方式。

在使用 SSR 时有哪些不同的方法可以实现这一目标？

【问题讨论】：

标签： reactjs next.js server-side-rendering

【解决方案1】：

我建议使用会话 cookie。这在 next.js getInitialProps 方法中可用。

static async getInitialProps ({req}) {
  console.log(req.headers.cookies) // depending on your server middlewares / config, this is available
}

LocalStorage 或 SessionStorage 在 SSR 中不可用，而 cookie 始终附加到请求中。我进一步建议制作 cookie secure（仅通过 https 提供）并使用 http-only 防止 JS 客户端/浏览器访问。

当使用express-session 时，使用 cookie/sessions 会更方便。

static async getInitialProps ({req}) {
  console.log(req.session) // with express session
}

【讨论】：

处理 cookie 或 session 通常哪种方法比较好？

【解决方案2】：

> import cookie from 'cookie'
> 
> export function parseCookies(req) {   return cookie.parse(req ?
> req.headers.cookie || "" : document.cookie); }

【讨论】：

您的答案可以通过额外的支持信息得到改进。请“编辑”以添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。您可以在帮助中心找到更多关于如何写好答案的信息：stackoverflow.com/help/how-to-answer

【解决方案3】：

我最近在做类似的事情。通常，您可以将其存储在存储或 cookie 中。但是对于nextJS，您可能希望在客户端和服务器端方法中都使用它，例如getServerSideProps。这样您就可以及早检测用户是否登录，在页面呈现之前进行 API 调用（利用 nextJS SSR）。

请参阅this discussion，其中明确提到 cookie 是一种方式。 NextJS 的合作者是这样说的：

如果您希望在客户端和服务器上都可以使用数据，您可以使用 cookie。

这是有道理的。记住，getServerSideProps 等方法不会在客户端上运行，也无法访问这些对象：document、window 等。

在客户端完成登录后，您可以设置 cookie，如：document.cookie = "cookiename=hello"。这是SO answer

在 getServerSideProps(context) 中，利用 param 上下文，它可以让您访问像 context.req 这样的请求。然后您可以从请求对象中获取 cookie，使用 cookie parser module 或 context.req.headers.cookie。

【讨论】：