В каком методе жизненного цикла я должен вызывать моего создателя действий для проверки подлинности пользователя?

Question

У меня есть приложение, в котором данные аутентификации пользователя хранятся в localStorage. В моем компоненте приложения есть роты, которые недоступны для неаутентифицированных пользователей. Когда пользователь посещает страницу, в скрипте компонента App вызывается функция создателя действия и проверяется, есть ли у пользователя данные в локальном хранилище, и, если он есть, данные отправляются в мое хранилище с избыточностью, поэтому таким образом он будет аутентифицирован. Но есть некоторая проблема. Когда пользователь находится в режиме ожидания, который недоступен для пользователей, не прошедших проверку подлинности, и обновляет страницу, поэтому компонент приложения будет отображаться в первый раз, а в первый раз пользователь остается не прошедшим проверку подлинности, поскольку в моем хранилище избыточных данных нет данных авторизации, создатель действия собирается быть запущенным в конструкторе, но реквизит редукса все равно не придет к моему Компоненту, и в компоненте он проверяет и понимает, что пользователь не прошел проверку подлинности и перенаправляет его в основной каталог, а затем поступают избыточные данные, и поэтому пользователь уже аутентифицирован, но его нет на странице, где он находился. Маршруты в компоненте приложения

Создатель действия, который проверяет и автоматизирует аутентификацию пользователя

Порядок действий в консоли. (Пожалуйста, посмотрите)

Answer 1

Другой вариант Поскольку ваше действие предоставляет только некоторые данные, вы можете использовать селектор вместо действия, подключите ваше приложение с помощью connect HO C и в mapStateToprops получите логическое значение, если пользователь аутентифицирован

const mapStateToprops = (state) => {
  isAuth: getIsAuth()
}

const getIsAuth = () => {
    const token = localStorage.getItem('token');
    if (!token) {
        return false;
    }
    const expirationDate = newDate(localStorage.getItem('expirationDate');
    if (// !expired ) {
        return true; 
    }

    return false;
}

Answer 2

Сначала вы должны проверить, прошел ли пользователь аутентификацию, и вызвать ваше действие onAuthAuth в жизненном цикле componentDidMount, и, поскольку он асинхронный c вызов, вы должны отобразить загрузчик / спиннер. Как только вы получили ваши данные, здесь у вас есть 2 случая: 1. Пользователь аутентифицирован, затем вы можете остановить загрузчик и отобразить компонент приложения для аутентифицированных пользователей. Вы можете добавить флаг isLogout в свой магазин, и если он ложный и ваши данные из localalstorage существуют, вы можете знать, что они аутентифицированы. 2. пользователь не прошел проверку подлинности, isLogout true остановите загрузчик и перейдите на страницу входа.

сообщите мне, помогло ли вам