Как я могу перенаправить пользователя после обновления состояния?

Question

У меня есть страница входа в React, которая вызывает API-интерфейс NodeJS для аутентификации (Axios). Кажется, это работает нормально. Возвращает true в случае успеха и сообщение об ошибке при ошибке. Ps: я не использую JWT, но вместо этого сеанс. Я хочу, чтобы после успешного входа в систему состояние (глобальное) в компоненте изменилось, а затем перенаправило пользователя на панель мониторинга.

Код, который у меня, похоже, меняет глобальное состояние (Redux) без проблем в тестахЯ сделал после входа в систему успешно.

export const Login = () => {

    const loggedIn = useSelector(state => state.loggedIn)
    const dispatch = useDispatch()

    const axiosURL = 'http://127.0.0.1:3333'

    const [inputs, setInputs] = useState("")
    const [returnMessage, setReturnMessage] = useState("")

    const handleSubmit = (e) => {

        e.preventDefault()

        setTimeout(async (e) => {

            const { data } = await axios.post( axiosURL + '/login', inputs)

            setReturnMessage(data.message)

            if (!data.message) dispatch({ type: 'LOGIN' })

        }, 1000)
    }

    if (loggedIn) {

        return <Redirect to='/' />
    }

    return (... the JSX form code ...)
}

Это работает и перенаправляет на "/", когда вход в систему работает, проблема в том, что я получаю ошибку, которую я не знаю, как исправить (ипричина):

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

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

const PrivateRoute = ({ component: Component }) => (

    <Route render={props => (

        loggedIn ? (

            <Component {...props} />

        ) : (

            <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
    )}
    />
)

Кто-нибудь знает, как это исправить или даже предложить лучшее решение для того, что мне нужно? Я не хочу хранить JWT на стороне клиента в целях безопасности. Спасибо всем.

Answer 1

Я исправил это, добавив глобальное состояние loggedIn в качестве реквизита, например:

const PrivateRoute = ({ component: Component, loggedIn }) => (

    <Route render={props => (

        loggedIn ? (

            <Component {...props} />

        ) : (

            <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
    )}
    />
)

И:

export const Routes = () => {

    const loggedIn = useSelector(state => state.loggedIn)

    return (
        <Switch>
            <PrivateRoute exact path="/" component={Home} loggedIn={loggedIn} />
            <Route exact path="/login" component={Login} />
            <Route component={Error404} />
        </Switch>
    )
}

Если кто-нибудь знает лучший подход к этому, пожалуйста,дайте мне знать.