Next.js s-s-r 存储访问令牌而不使用 redux

Posted 2023-03-28

【中文标题】Next.js s-s-r 存储访问令牌而不使用 redux

【英文标题】：Next.js s-s-r store access token without using redux

【发布时间】：2019-03-31 01:13:19

【问题描述】：

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

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

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

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

【参考方案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 在 s-s-r 中不可用，而 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); 

【讨论】：

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

【参考方案3】：

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

请参阅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。