React Redux аутентификация

Question

дорогие форумчане. Недавно начал изучать React, да и вообще Frontend, после многолетнего Backend`a и вот сталкиваюсь с казалось бы простыми, но непонятными мне трудностями.

В данный момент интересует система аутентификации пользователя на сайте. Предположим у нас имеется локальный state

export interface ILoggedUserStateType {
    LoggingIn: boolean;
    LoggedIn: boolean;
}

Начальное значение у редьюсера:

const initialState: ILoggedUserStateType = {
    LoggedIn: false,
    LoggingIn: false
}

В момент авторизации на сервере генерируется JWT и помещается Cookie чтобы каждый следующий запрос был авторизованным на сервере. По успешному запросу авторизации отправляется команда на консьюмер и меняет состояние:

case LOGIN_SUCCESS:
     return {
        ...state,
        LoggedIn: true,
        LoggingIn: false
     };

Замечательно, теперь компоненты, которые проверяли флаг LoggedIn отображают авторизованные данные. Но длится это до первого обновления страницы, где происходит отчистка State. И вот мы вроде и авторизованы, но данные об этом не отображаются, пока мы не обновим State. Первая мысль была заносить что-то типа "LoggedId=yes" в LocalStorage и по нему при инициализации консьюмера выполнять проверку:

localStorage.getItem("LoggedIn") == "yes"

Но у данного подхода есть нюанс. В Cookie мы можем установить время жизни, например на час, после чего снова нужна будет авторизация. Но LocalStorage не имеет времени жизни и поэтому будет пытаться отображать данные будто бы мы авторизованный пользователь (за исключением тех данных, что берутся с сервера под авторизацией).

Еще одной мыслью было что при каждом открытии сайта на сервер будет отправляться запрос типа "CheckAuth", который будет возвращать true/false в зависимости от проверки. Но это лишние запросы и переключение между состояниями будет видно пользователю. Посмотрев сетевой поток различных крупных сайтов, не увидел тех решений, что пришли мне в голову.

Поэтому прошу натолкнуть на правильный путь. Спасибо

Answer 1

подключи токен прост, закидываешь в инишиал стейт и проверяй если нет токена то выкидывай авторизацию

const initialState = {
  token: window.localStorage.token,
  isAuth: !!window.localStorage.token
};


const App = ({ isAuth }) => {
  return (
    <div className="wrapper">
      <Switch>
        <Route exact path={["/signin", "/signup"]} component={Auth} />
        <Route
          path={"/"}
          render={() => (isAuth ? <Home /> : <Redirect to="/signin" />)}
        />
      </Switch>
    </div>
  );
};

export default connect(({ user }) => ({ isAuth: user.isAuth }))(App);

БЛОГ НА HUSL

React Redux аутентификация

Ответы (1 шт):