Как оформить логин? - PullRequest
       10

Как оформить логин?

0 голосов
/ 25 сентября 2018
Я использую React Native, но у меня возникают проблемы при входе. Не могли бы вы помочь мне
  • "response-native": "0.57.0",
  • "реагировать-redux ":" ^ 5.0.7 ",
  • " реакции-маршрутизатор ":" ^ 4.3.1 ",
  • " реакции-маршрутизатор-родной ":" ^ 4.3.0 ",
  • "redux": "^ 4.0.0",
  • "redux-saga": "^ 0.16.0"

index.js

import React from 'react';
import { StyleSheet, View, } from 'react-native';
import { Provider } from 'react-redux';
import { NativeRouter, Route, } from 'react-router-native';

import store from './store';
import Main from './containers/main';
import Login from './containers/login';

const App = () => (
    <Provider store={store}>
        <NativeRouter>
            <View style={{ flex: 1, }>
                <Route exact path="/" component={Main} />
                <Route path="/login" component={Login} />
            </Root>
        </NativeRouter>
    </Provider>
);

export default App;

main.js

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-native';
import { FETCH_HOME_REQUEST } from '../../actions/types';

class HomeComponent extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const { dispatchHomeData, } = this.props;
        dispatchHomeData && dispatchHomeData();
    }

    render() {
        const { homeData, } = this.props;
        const { status, error_no, data, } = homeData;
        if(status === false && error_no == AUTH_FAIL) {
            return <Redirect push to={'/login'} />;
        }
        return (
            <View><Text>Show Home Data...</Text><View>
        );
    }
}

const mapStateToProps = (state, ownProps) => ({
    homeData: state.home,
});

const mapDispatchToProps = (dispatch, ownProps) => ({
    dispatchHomeData: () => dispatch({
        type: FETCH_HOME_REQUEST,
        token: true,
    }),
});

const Home = connect(mapStateToProps, mapDispatchToProps)(HomeComponent);
export default Home;

login.js

import React, { Component } from 'react';
import { 
    StyleSheet, 
    View,
    Text,
    TextInput,
    TouchableOpacity,
} from 'react-native';

export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
        };
    }

    render() {
        return (
            <View>
                <TextInput
                    placeholder="UserName"
                    onChangeText={(username) => this.setState({username})}
                />
                <TextInput
                    placeholder="Password"
                    onChangeText={(password) => this.setState({password})}
                />
                <View>
                    <TouchableOpacity onPress={this.startLogin}>
                        <Text>Sign In</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }

    startLogin = () => {
        ...
        ... // fetch request
        ... 
        // if success 
        const { history } = this.props;
        if(history.index === 0) {
            history.push('/');
        }else {
            history.goBack();
        }
    };
}

начальное состояние

state = {
    home: {
        data: null,          // main data
        isFetching: false,    // Whether the request
        status: true,        // Has the request gone wrong
        error_no: null,      // Error code, zero means normal
        error_msg: '',      // The error message
    },
    token: '',
}

Процесс работы

  1. Вход в приложение (домашняя страница отображения по умолчанию)

Когда данные запрашиваются, поскольку токен пуст или проверка не пройдена, он автоматически перейдет на страницу входа.
Состояние становится следующим.

state = {
    home: {
        data: null, 
        isFetching: false, 
        status: false, 
        error_no: 401,
        error_msg: 'auth fail',
    },
    token: '',
}
Введите пароль для входа в систему

Будет повторный переход для входа в систему, потому что предыдущий пристав сохранил данные.Я не знаю, должен ли я сбросить домашние данные или изменить решение о прыжке.Есть ли у вас хорошие предложения?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...