Как сделать аутентификацию через React-router-dom?

Как выполнить аутентификацию пользователя через react-router-dom?


При аутентификации получаю токен и записываю его в localStorage (и в redux store)
Когда пользователь загружает приложение проверяю на существование этого поля
и если оно существует, должен показать ему страницу UsersList.

В моем случае, приложение сначала говорит что токена нет, потом проводит проверку,
но redirect на форму авторизации уже произошел (код компонента ниже).
Подскажите как сделать аутентификацию

P.S. если нужно дополнить вопрос, напишите комментарии дополню

import React, {useEffect} from "react";
import {connect} from "react-redux";
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import {checkOnAuth} from "../store/actions";
import {
    Auth, UsersList, Error
} from "../pages";


const Routers = ({ token, checkOnAuth }) => {
    useEffect(()=>{
        checkOnAuth();
    }, []);

    const isAuthenticated = !!token;
    return (
        <Router>
            <Switch>
                <Route
                    path="/"
                    render={() => (
                        isAuthenticated
                            ? <UsersList />
                            : <Redirect to="/auth" />
                        )}
                    exact
                />
                <Route path="/auth" component={Auth} exact />
                <Route component={Error} />
            </Switch>
        </Router>
    )
}

let mapStateToProps = state => ({token: state.auth.token});
let mapDispatchToProps = { checkOnAuth };
export default connect(mapStateToProps, mapDispatchToProps)(Routers);

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

Автор решения: Sergei Kirjanov

Попробуйте вместо Redirect сразу Auth

→ Ссылка