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。