0

Как выполнить аутентификацию пользователя через 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 ответ 1

0

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

6
  • Пробовал, работает, но мигает (сначала 1 компонент прогружается <Auth />, потом второй <UsersList />) 17 авг 2020 в 1:07
  • мигает -- это уже лучше, т. е. на секунду Auth кажет, а потом UsersList. 17 авг 2020 в 1:31
  • 1
    > приложение сначала говорит что токена нет, потом проводит проверку [variant 1] если сделать 3 состояния есть/нету/пока-не-знаю [variant 2] положить правильное состояние в сторе сразу в ините 17 авг 2020 в 1:36
  • Я правильно понял, что token в пропах из сторе, а checkOnAuth кладет в сторе? 17 авг 2020 в 1:39
  • Попробую вечером, возможно сработает, еще можно попробовать дожидаться проверки, а потом показывать страницу 17 авг 2020 в 4:46

Ваш ответ

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

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