Авторизация в React?

Question

[Wondermarin]

Пишу приложение на React, начал реализовывать авторизацию, но столкнулся с некоторыми трудностями, прошу у более опытных людей в этом вопросе помощи.
Есть header у сайта с кнопкой "Войти", она переводит пользователя на сторонний сервис, где этот самый пользователь должен авторизовать приложение (технология OAuth2 проще говоря). После того, как пользователь авторизует приложение, его вернет на страницу /login?code={code}, с помощью этого кода у сервиса уже можно будет получить токен доступа, и далее произойдет редирект на страницу /dashboard. Но тут и случаются проблемы, т.к. /dashboard - защищенный роут, то при редиректе (а он происходит моментально) пользователя снова выкидывает на главную, ибо приложение еще не успело получить токен и в Redux Store не обновилось поле IsLoggedIn.

На эти вопросы меня интересуют ответы:
1. Возможный ответ со страницей /login? Заставить приложение ждать получение токена перед редиректом, а во время ожидания повесить заглушку по типу "Происходит авторизация..."?
2. Что делать в том случае, когда пользователь будучи авторизованным обновит страницу /dashboard? Его токен сохранен в LocalStorage, но получение информации о владельце токена занимает время, из-за которого происходит преждевременный редирект на главную, ибо в этот момент IsLoggedIn все еще false.

Заранее благодарю за любые ответы.

Answer 1

[nakree]

1. Добавить статус авторизации в redux. В компоненте если статус === REQUEST, то показывать заглушку, если процес авторизации завершился, то при статусе SUCCESS/FAILURE сделать редирект куда нужно.
2. Этот вопрос так же решается статусом. Так же нужно в момент инициализации приложения отправить запрос на авторизацию если есть токен в localStorage.

P.S. Для проверки логина пользователя на определенном роуте можно сделать враппер или HOC который будет чекать статус, показывать прелоадер или нужный роут.

Comments

[Wondermarin]

Спасибо за ответ, вы действительно мне помогли. Не могли бы вы приложить какой-нибудь пример HOC или враппера? Спасибо.

[nakree]

Wondermarin,

import React from 'react';
import { Route, Redirect } from 'react-router';
import { useSelector } from 'react-redux';

import Wrapper from '../wrappers/Wrapper';
import { PageLoader } from '../ui/layout/Loader';
import { authSelectors } from '../../modules/auth/authSelectors';
import { configSelectors } from '../../modules/config/configSelectors';
import { REQUEST } from '../../config/constants';
import routing from '../../config/routing';

export default function AuthRoute({ pageName, ...rest }) {
  const isAuth = useSelector(authSelectors.isAuth);
  const { status } = useSelector(authSelectors.getLogin);

  if (status === REQUEST) {
    return (
      <Wrapper pageName={pageName}>
        <PageLoader/>
      </Wrapper>
    );
  }

  if (!isAuth) {
    return <Redirect to={routing().login} />;
  }

  return (
    <Wrapper pageName={pageName}>
      <Route {...rest} />
    </Wrapper>
  );
}

//App.jsx
...
<Switch>
    <WrappedRoute exact path={routing().login} component={Login} />
    <AuthRoute exact path={routing().a} component={A} />
    <AuthRoute exact path={routing().b} component={B} />
    <AuthRoute exact path={routing().c} component={C} />
</Switch>
...