Как проверить токен перед тем, как я отобразю домашнюю страницу

Question

Я борюсь с повторным рендерингом в моем проекте. Сначала я проверяю повара ie, прежде чем перенаправить пользователя на страницу входа. Я использую Redux Store с этой структурой.

var initialState = {
    user: {
        auth: false,
        isFetching: false,
        isTokenFetching: false
    }
}

Выборка для входа через форма входа , выборка токена для входа через токен в куки

Я использую настроенный маршрут Dynami c, чтобы сделать его рендерингом на основе этого условия. (isFetching - это когда извлекается токен)

const DynamicRoute = ({isFetching,isAuthenticated, ...rest}) => {
    return isFetching ? <h1>Fetching</h1> : (
        <Route {...rest} render={(props) =>{
        return isAuthenticated ?
        <HomePage/> :
        <LogInPage/>}}/>
    )
} 

Эта функция вызывается перед отправкой действия, поэтому сначала отображается LogInPage и Извлечение , когда действие отправляется и снова отображает HomePage , когда токен действителен.

Как убедиться, что он LogInPage и HomePage отображается только один раз. Например, если токен действителен (только HomePage), если токен недействителен (только LogInPage)

Я хочу, чтобы этот динамический c маршрут работал, потому что я надеюсь использовать URL для обоих условий.

Извините, если мое объяснение плохое

Answer 1

1. Во-первых, если isAuthenticated истинно, мы должны перенаправить пользователя на HomePage, не так ли?

return isAuthenticated ? <HomePage/> : <LogInPage/>;

Как сделать так, чтобы LogInPage и HomePage отображались только один раз.

Используйте компонент Redirect, чтобы перенаправить пользователя обратно на LogInPage вот так:

return isAuthenticated ? <HomePage/> : <Redirect to="/login" />;

Компонент Redirect можно получить от react-router-dom:

import { Redirect } from "react-router-dom";

Я предполагаю, что вы определили маршрутизатор следующим образом:

<Route path="/login" component={LogInPage} />

ИМХО, вам следует изменить способ аутентификации вашего рабочего процесса, потому что в будущем его масштабировать нехорошо. Взгляните на это: Пример реакции-маршрутизатора auth-worflow

По сути, ваши маршрутизаторы станут примерно такими:

<Route path="/login" component={LogInPage} />
<PrivateRoute path="/home" component={HomePage} />