Authentication 在NextJs getInitialProps中获取本地存储

我正在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

将在服务器上运行 只是<代码>getInitialProps将在导航到 通过

next/link

组件或使用

next/router

的不同路由

这意味着您将无法始终访问

localStorage

（仅限客户端），必须处理它：

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

对于初始页面加载，

getInitialProps

将在服务器上运行 只是<代码>getInitialProps将在导航到 通过

next/link

组件或使用

next/router

的不同路由

这意味着您将无法始终访问

localStorage

（仅限客户端），必须处理它：

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

。

getInitialProps

完全在服务器端运行，

localStorage

仅存在于客户端，所以你没有办法访问它。使用另一种发送数据的方式，如cookies、http正文等。与新的

getServerSideProps

始终在服务器端运行不同，

getInitialProps

实际上可以在客户端转换期间运行。但我同意Cookie在这种情况下是一个更好的解决方案。

getInitialProps

完全在服务器端运行，

LocalStorage

只存在于客户端，因此您无法访问它。使用另一种发送数据的方式，如cookies、http正文等。与新的

getServerSideProps

始终在服务器端运行不同，

getInitialProps

实际上可以在客户端转换期间运行。但我同意Cookie在这种情况下是一个更好的解决方案。我已经尝试过你的解决方案，当我改变路线时，效果很好。是的，它不适用于初始页面加载。但是，我已经按照@alejandro指令使用cookie解决了这个问题。我相信饼干是最好的解决办法。谢谢你的帮助。我已经尝试过你的解决方案。当我改变路线时，效果很好。是的，它不适用于初始页面加载。但是，我已经按照@alejandro指令使用cookie解决了这个问题。我相信饼干是最好的解决办法。谢谢你的帮助。