Проверка аутентификации на react

@refactor-chenge · Регистрация: 21.11.2017

Студворк — интернет-сервис помощи студентам

Здраствуйте! помогите пожалуйста, как сделать проверку аутентификации, и если пользователь залогинился то перейти на страницу home, у меня что то нчего не получается, не пойму как это делать((((
вот что у меня есть на обработчике событий кнопки submit, я так понимаю логику нужно здесь записать, только как?

JavaScript
1
2
3
4
5
 handleSubmit = (e, nextState, replace) => {
        e.preventDefault();
        localStorage.setItem('email',JSON.stringify(this.state.email));
        localStorage.setItem('password', JSON.stringify(this.state.password));
    };

вот весь код формы :

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
class Form extends  React.Component {
    constructor (props) {
        super(props);
        this.state = {
            email: '',
            password: '',
            formErrors: {email: '', password: ''},
            emailValid: false,
            passwordValid: false,
            formValid: false
        }
    }
    handlePasswordChange = (e) => {
        console.log('handlePasswordChange', this);
        this.setState({password: e.target.value});
 
    };
 
    handleUserInput = (e) => {
        const name = e.target.name;
        const value = e.target.value;
        this.setState({[name]: value},
            () => { this.validateField(name, value) });
    };
 
    validateField = (fieldName, value) => {
        let fieldValidationErrors = this.state.formErrors;
        let emailValid = this.state.emailValid;
        let passwordValid = this.state.passwordValid;
 
        switch(fieldName) {
            case 'email':
                emailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
                fieldValidationErrors.email = emailValid ? '' : ' is invalid';
                break;
            case 'password':
                passwordValid = value.length >= 6;
                fieldValidationErrors.password = passwordValid ? '': ' is too short';
                break;
            default:
                break;
        }
        this.setState({formErrors: fieldValidationErrors,
            emailValid: emailValid,
            passwordValid: passwordValid
        }, this.validateForm);
    };
 
    validateForm = () => {
        this.setState({formValid: this.state.emailValid && this.state.passwordValid});
    };
    handleSubmit = (e, nextState, replace) => {
        e.preventDefault();
        localStorage.setItem('email',JSON.stringify(this.state.email));
        localStorage.setItem('password', JSON.stringify(this.state.password));
    };
 
    errorClass = (error) => {
        return(error.length === 0 ? '' : 'has-error');
    };

@Resume · 17.02.2018, 17:33

Роутинг используете ?

@refactor-chenge · 17.02.2018, 17:47 **[ТС]**

да, роуты в файле app

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    render(){
        return (
            <Router>
                <Switch>
                    <Route exact path="/Login" component={Login}/>
                    <PrivateLayout exact path="/" component={Home} />
                    <PrivateLayout exact path="/Workflow" component={Workflow} />
                    <PrivateLayout exact path="/Statistics" component={Statistics} />
                    <PrivateLayout exact path="/Calendar" component={Calendar}/>
                    <PrivateLayout exact path="/Users" component={Users}/>
                    <PrivateLayout exact path="/Settings" component={Settings}/>
 
                    <Route component={NotFound} />
                </Switch>
            </Router>
        );
    }
 
}

и отдельно враппер

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const DefaultLayout = ({component: Component, ...rest}) => {
    return (
        <Route {...rest} render={matchProps => {
            const userExist = false;
 
            if (!userExist) {
                return <Redirect to="/Login"/>
            }
          
                else {
                    return (
                        <div className="Wrapper">
                            <TopMenu/>
                            <Component {...matchProps} />
                        </div>
                    );
                }
        }} />
    )
};

@Resume · 17.02.2018, 23:52

JavaScript
1
2
3
4
5
handleSubmit = (e, nextState, replace) => {
        e.preventDefault();
        localStorage.setItem('email',JSON.stringify(this.state.email));
        localStorage.setItem('password', JSON.stringify(this.state.password));
    };

Я думаю, что здесь надо добавить строчку кода, которая будет отвечать за переход на домашнюю страницу.
Возможно, попробуйте вот это:

JavaScript
1
this.props.history.push('/');

Если не подойдет, то поищите на stackoverflow ответы.

@refactor-chenge · 19.02.2018, 14:48 **[ТС]**

то что надо, спасибо)

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Resume 143 / 133 / 69 Регистрация: 08.11.2013 Сообщений: 767 Записей в блоге: 5
	17.02.2018, 17:33
	Роутинг используете ? 0

@refactor-chenge 0 / 0 / 0 Регистрация: 21.11.2017 Сообщений: 41
	19.02.2018, 14:48 [ТС]
	то что надо, спасибо) 0

Проверка аутентификации на react

Решение