authentication - 在 NextJs getInitialProps 中获取 localStorage

Question

我在我的 next.js 应用程序中使用 localStorage token 。我试图在 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

For the initial page load, getInitialProps will run on the server only. getInitialProps will then run on the client when navigating to a different route via the next/link component or by using 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 };
  }
};

如果你想在初始页面加载时获取用户的 token ，你必须将 token 存储在 cookies 而不是 localStorage 中，@alejandro 在评论中也提到了这一点.