1

дорогие форумчане. Недавно начал изучать 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 в зависимости от проверки. Но это лишние запросы и переключение между состояниями будет видно пользователю. Посмотрев сетевой поток различных крупных сайтов, не увидел тех решений, что пришли мне в голову.

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

1 ответ 1

0

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

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);
4
  • Здравствуйте. Это в принципе то, о чем и говорил. Фактически человек может просто зайти в настройки страницы добавить в localStorage "token" и будет видеть прорисовку авторизированных данных. Не спорю, что сервер все равно его не пропустит и сейчас на самом почти так и оставил, но вот что-то покоя не дает 28 дек 2020 в 7:33
  • @VolodyaPutiin если хотите придумать то чего не смогли придумать фейсбук или гугл то желаю удачи.
    – Randall
    28 дек 2020 в 7:58
  • Как раз я пробовал разбирать разные крупные сайты. Нигде не использовался localStorage как хранилище ключа или флага авторизации, в основном вся авторизация через Cookie, но это для серверной части. GitHub разве что использует localStorage "logged_in=yes" 28 дек 2020 в 10:11
  • На facebook как я наблюдаю каждое действие производит get запрос на /navigation/, что в целом валидирует доступ и исключает хранение в localStorage 28 дек 2020 в 10:33

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.