在 NextJs getInitialProps 中获取 localStorage答案

【问题标题】：Get localStorage in NextJs getInitialProps在 NextJs getInitialProps 中获取 localStorage
【发布时间】：2020-06-19 15:57:08
【问题描述】：

我在 next.js 应用程序中使用 localStorage 令牌。我试图在 getInitialProps 页面上获取 localStorage，但它返回 undefined。

这是一个例子，

Dashboard.getInitialProps = async () => {
  const token = localStorage.getItem('auth');
  const res = await fetch(`${process.env.API_URL}/pages/about`, {
    headers: { 'Authorization': token }
  });
  const data = await res.json();

  return { page: data };
}

【问题讨论】：

getInitialProps 完全在服务器端运行，而LocalStorage 仅在客户端存在，因此您无法访问它。使用另一种发送数据的方式，如 cookie、http 正文等。
与始终在服务器端运行的新getServerSideProps 不同，getInitialProps 实际上可以在客户端转换期间在客户端运行。但我同意 cookie 在这种情况下是更好的解决方案。

标签： authentication local-storage next.js

【解决方案1】：

对于初始页面加载，getInitialProps 将在服务器上运行只要。然后getInitialProps 将在客户端导航到通过next/link 组件或使用next/router 的不同路线。 Docs

这意味着您将无法一直访问localStorage(client-side-only) 并且必须处理它：

Dashboard.getInitialProps = async ({ req }) => {
  let token;
  if (req) {
    // server
    return { page: {} };
  } else {
    // client
    const token = localStorage.getItem("auth");
    const res = await fetch(`${process.env.API_URL}/pages/about`, {
      headers: { Authorization: token },
    });
    const data = await res.json();
    return { page: data };
  }
};

如果您想在初始页面加载时获取用户的令牌，则必须将令牌存储在 cookies 而不是 @alejandro 在评论中提到的 localStorage。

【讨论】：

我已经尝试过您的解决方案，当我更改路线时它工作正常。是的，它不适用于初始页面加载。但是，我已经按照@alejandro 指令使用 cookie 解决了这个问题。我相信 cookie 是最好的解决方案。感谢您的帮助。