Question

我在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 };
}

Answer 1

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

这意味着您将无法始终访问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中。

在NextJs中获取localStorage getInitialProps

1 个答案: