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

Question

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

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

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

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

Answer 1

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

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

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

使用快速会话时，使用cookie /会话会更加方便。

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

Answer 2

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

Answer 3

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

请参阅此讨论，其中清楚地提到 cookie 是方式。 这是 NextJS 的合作者所说的：

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

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

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

在 getServerSideProps(context) 中，使用 param 上下文，它使您可以访问像context.req一样的请求。 然后，您可以使用 cookie解析器模块或context.req.headers.cookie从请求对象中获取 cookie。