Получить localStorage в следующем Js getInitialProps - PullRequest
Новая
       73

Получить localStorage в следующем Js getInitialProps

0 голосов
/ 19 июня 2020

Я работаю с токеном localStorage в следующем приложении. js. Я попытался получить localStorage на странице getInitialProps, но он возвращает 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 };
}

1 Ответ

3 голосов
/ 19 июня 2020

При начальной загрузке страницы 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 вместо localStorage, который @alejandro также упомянул в комментарии.

...