Условное выполнение getInitialProps в Next. js - PullRequest
0 голосов
/ 15 февраля 2020

У меня есть глобальное управление состоянием с использованием useContext и useReducer. Я хочу проверить, аутентифицирован ли пользователь или нет. чтобы сделать то, что мне пришло в голову, нужно было проверить внутри getInitialProps таким образом:

DashboardPage.getInitialProps = async () => {
  const [globalState, dispatch] = useContext(STORE.storeContext);
  let auth = globalState.isAuthed
  if (!auth) {
    auth = axiox.get('/authenticateThisUser');
  } 
  return {
    auth,
  }
}

Однако, когда я выполняю этот фрагмент, он выдает Error: Invalid hook call. Hooks can only be called inside of the body of a function component. как я могу использовать useContext внутри getInitialProps?

То, что я ищу, - это способ предотвратить отправку компонентами избыточных запросов авторизации на сервер.

Было бы замечательно, если бы было несколько методов для условного выполнения getInitialProps, например:

if(globalState.isAuthed){
    //dont execute getInitialProps of this component
}else {
    //execute getInitialProps of this component
}

1 Ответ

0 голосов
/ 16 февраля 2020

На самом деле то, что я хотел сделать, sh можно сделать с помощью кода ниже:

DashboardPage.getInitialProps = async ({ req, query, asPath }) => {

    // only in server-side
    if (req) {
        const userUrl = `http://localhost:3000${userConfig.ROUTES.user.getUser}`;
        const isMeUrl = `http://localhost:3000${userConfig.ROUTES.isMe}`;
        const result = await axios.all([axios.get(isMeUrl), axios.get(userUrl)]);

        return {
            me: result[0].data.payload,
            user: result[1].data.payload,
        };
     }
     // only in client-side
     // since we've done authenticating, it is set in the global state management
     // therefore, no need to send any request to the auth API endpoint.
     return {};

};

Таким образом, мы гарантируем, что запросы авторизации будут отправляться только на стороне сервера (первый запрос), и предотвращаем компонент из избыточных запросов для отправки.

...