Как показать загрузочный счетчик вместо кнопки входа в систему, когда кнопка была нажата в next.js? - PullRequest
Новая
       21

Как показать загрузочный счетчик вместо кнопки входа в систему, когда кнопка была нажата в next.js?

1 голос
/ 05 июня 2019

Привет,

Я просто играю с next.js и пытаюсь создать небольшое приложение на форуме.

После бесконечных часов поисков у меня возникает следующий вопрос:

Как я могу показать загрузочный счетчик вместо кнопки входа в систему, когда она нажата, до тех пор, пока она не будет решена, а затемпоказать кнопку выхода?

Мне удалось переключиться между входом и выходом из системы (я просто передаю реквизит req.user в компонент navbar и могу его условно показать).

Но есть ли в объекте req какая-то опора, указывающая, что он не был разрешен?

Приложение next.js использует express в фоновом режиме.

Таким образом, некоторые маршруты являются просто ссылками на другие страницы, а маршрут входа в систему является фактически маршрутом API.

Это просто аутентифицируется с помощью паспорта, и после успеха он перенаправляет на "/".

Я не смог найти никакого решения для этой проблемы.

Вот небольшой предварительный просмотр моей навигационной панели: 

{user ? (
            <Link href="/api/auth/logout">
              <Button color="inherit">Logout</Button>
            </Link>
          ) : (
            <Link href="/api/auth/facebook">
              <Button color="inherit">Login</Button>
            </Link>
          )}

Как добавить другое условное что-товот так: 

{isLoading ? (
            <p>Loading..</p>
          ) : user ? (
            <Link href="/api/auth/logout">
              <Button color="inherit">Logout</Button>
            </Link>
          ) : (
            <Link href="/api/auth/facebook">
              <Button color="inherit">Login</Button>
            </Link>
          )}

Это решило бы мою последнюю вещь, которую я сейчас застрял.Я надеюсь, что это даже возможно, потому что я могу себе представить, что это не так легко сделать с SSR?

Что я пробовал до сих пор:

Мне удалось получить хотя бы полную полосу загрузки страницы ссправка next/router и пакет npm NProgress.

Установить так (в файле _app.js) 

Router.events.on("routeChangeStart", url => {
  console.log(`Loading: ${url}`);
  NProgress.start();
});
Router.events.on("routeChangeComplete", () => NProgress.done());
Router.events.on("routeChangeError", () => NProgress.done());

Но это просто дает мне полную загрузку страницыиндикатор, и я хочу, чтобы при входе в систему была только небольшая вертушка.

...