In diesem Artikel wird hauptsächlich das Anmeldemodul von React vorgestellt und die Anmeldesituation von React im Detail vorgestellt. Werfen wir nun einen Blick auf den Text des Artikels

Reaktionsbasierte Anmeldung

Die erste Art der Anmeldung

Anmeldeseite-Übermittlungs-Login-HandleSubmit(), mittel API-Anfragen direkt stellen. Springen Sie nach erfolgreicher Anmeldeanforderung zu History.push(nextPathname, null);

Informationen zur Implementierungsmethode finden Sie unter http://blog.csdn.net/qq_27384769/article/ Details/78775835

Die zweite Art der Anmeldung

Nachdem die Anmeldeseite die Anmeldung übermittelt hat, wird handleSubmit() asynchron ausgeführt Die Anfrage wird durch Saga initiiert.

Nachdem die Anfrage erfolgreich war, starten Sie eine Aktion und rufen Sie den Reduzierer auf. Laden Sie die Anmeldeseite neu.

Überprüfen Sie in der LebenszykluskomponenteWillReceiveProps der Anmeldeseite die Anmeldeinformationen und fordern Sie einen Sprung an.

Im Folgenden finden Sie eine Erläuterung des

Reduzierers für die zweite Anmeldemethode Datenstruktur in

auth:{
	type: "COMPLOGIN/RECEIVE_DATA", 
	isFetching: false, 
	data: {uid: 1, permissions: Array(5), role: "系统管理员", roleType: 1, userName: "系统管理员"}
}

Nach dem Login kopieren

Code

login.jsx

componentWillReceiveProps login Anpassen

handleSubmit nach Erfolg, um die Übermittlungsanmeldung zu bearbeiten

import React from 'react';import {Form, Icon, Input, Button, Checkbox} from 'antd';import {connect} from 'react-redux';import {bindActionCreators} from 'redux';import {findData, receiveData} from '../actions';import {selectVisibleMenuResourceTreeTable} from '../selector';const FormItem = Form.Item;class Login extends React.Component {    componentWillMount() {        const {receiveData} = this.props;        receiveData(null, 'auth');
    }    componentWillReceiveProps(nextProps) {        const {auth: nextAuth = {}} = nextProps;        if (nextAuth.data && nextAuth.data.uid) {   // 判断是否登陆
            localStorage.setItem('user', JSON.stringify(nextAuth.data));            this.props.history.push('/', null);
        }
    }    handleSubmit = (e) => {        e.preventDefault();        this.props.form.validateFields((err, values) => {            if (!err) {                console.log('Received values of form: ', values);                const {findData} = this.props;                if (values.userName === 'admin' && values.password === 'admin') findData({
                    funcName: 'admin',
                    stateName: 'auth'
                });                if (values.userName === 'guest' && values.password === 'guest') findData({
                    funcName: 'guest',
                    stateName: 'auth'
                });
            }
        });
    };    gitHub = () => {        console.log("gitHub");
    };    render() {        const {getFieldDecorator} = this.props.form;        return (            <p className="login">
                <p className="login-form">
                    <p className="login-logo">
                        <span>React Admin</span>
                    </p>
                    <Form onSubmit={this.handleSubmit} style={{maxWidth: &#39;300px&#39;}}>
                        <FormItem>
                            {getFieldDecorator('userName', {
                                rules: [{required: true, message: '请输入用户名!'}],
                            })(                                <Input prefix={<Icon type="user" style={{fontSize: 13}}/>}
                                       placeholder="管理员输入admin, 游客输入guest"/>
                            )}                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('password', {
                                rules: [{required: true, message: '请输入密码!'}],
                            })(                                <Input prefix={<Icon type="lock" style={{fontSize: 13}}/>} type="password"
                                       placeholder="管理员输入admin, 游客输入guest"/>
                            )}                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('remember', {
                                valuePropName: 'checked',
                                initialValue: true,
                            })(                                <Checkbox>记住我</Checkbox>
                            )}                            <a className="login-form-forgot" href="" style={{float: &#39;right&#39;}}>忘记密码</a>
                            <Button type="primary" htmlType="submit" className="login-form-button"
                                    style={{width: &#39;100%&#39;}}>
                                登录                            </Button>
                            或 <a href="">现在就去注册!</a>
                            <p>
                                <Icon type="github" onClick={this.gitHub}/>(第三方登录)                            </p>
                        </FormItem>
                    </Form>
                </p>
            </p>
        );
    }
}const mapStateToPorps = state => {    return {
        auth: selectVisibleMenuResourceTreeTable(state)
    }
};const mapDispatchToProps = dispatch => ({
    findData: bindActionCreators(findData, dispatch),
    receiveData: bindActionCreators(receiveData, dispatch)
});export default Form.create()(connect(mapStateToPorps, mapDispatchToProps)(Login));

Nach dem Login kopieren

Aktionen

findData Klicken Sie auf die Schaltfläche, um eine Anfrage zu initiieren

requestData vor dem Aufruf der API

requestData ruft die API auf, um Daten abzurufen

import * as type from './actionTypes';export const findData = (data) => {    let {funcName, stateName} = data;    return {
        type: type.COMP_LOGIN_FIND_DATA,
        funcName,
        stateName
    }
}export const requestData = category => ({
    type: type.COMP_LOGIN_REQUEST_DATA,
    category
});export const receiveData = (data, category) => ({
    type: type.COMP_LOGIN_RECEIVE_DATA,
    data,
    category
});

Nach dem Login kopieren

actionTypes

export const COMP_LOGIN_FIND_DATA = 'COMPLOGIN/FIND_DATA';export const COMP_LOGIN_REQUEST_DATA = 'COMPLOGIN/REQUEST_DATA';export const COMP_LOGIN_RECEIVE_DATA = 'COMPLOGIN/RECEIVE_DATA';

Nach dem Login kopieren

index

import React from 'react';import Bundle from '../../../bundle/views/bundle';import * as actions from './actions';const view = (props) => {    return (        <Bundle load={() => import("./lazy")}>
            {(View) => {                return <View {...props}/>
            }}        </Bundle>
    );
};export {actions, view};

Nach dem Login kopieren

faul Asynchrones Laden

Laden Sie die entsprechende Sagasreducerview

Datenstruktur im Reduzierer entsprechend der Komponente: [compLoginName]: compLoginReducer

import compLoginSagas from './sagas';import compLoginReducer from './reducer';import view from './views/Login';import {UumsCompsReducerNames} from '../../constants';const compLoginName = UumsCompsReducerNames.compLogin;const reducer = {
    [compLoginName]: compLoginReducer
};const sagas = {
    [compLoginName]: compLoginSagas
};export {sagas, reducer, view};

Nach dem Login kopieren

Reduzierer

Reine Funktion

export default (state = {}, action) => {    const {type} = action;    switch (type) {        case types.COMP_LOGIN_REQUEST_DATA: {            return {                ...state, type: type, isFetching: true
            }
        }        case types.COMP_LOGIN_RECEIVE_DATA:            return {...state, type: type,isFetching: false, data: action.data};        default:            return {...state};
    }
}

Nach dem Login kopieren

Sagas

Asynchrone Anrufe

import * as http from '../axios/index';import {call, put, takeLatest} from 'redux-saga/effects';import {requestData, receiveData} from './actions';import {COMP_LOGIN_FIND_DATA} from './actionTypes';export const fetchData = ({funcName, params}) => {    return http[funcName](params).then(res => {        return res;
    });
};function* fetchLoginInfo(data) {    try {        let {stateName} = data;        yield put(requestData());        const result = yield call(fetchData, data);        yield put(receiveData(result, stateName));
    } catch (e) {        console.log(e);
    }
}function* sagas() {    yield takeLatest(COMP_LOGIN_FIND_DATA, fetchLoginInfo);
}export default sagas;

Nach dem Login kopieren

Selektor

Speicherkomponenten-Selektor

import {createSelector} from &#39;reselect&#39;;const getCompLoginData = (state) => state.compLoginData;export const 
selectVisibleMenuResourceTreeTable = createSelector(
    [getCompLoginData],
    (compLoginData) => compLoginData
);

Nach dem Login kopieren

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, gehen Sie zur Spalte React-Benutzerhandbuch des Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.

Das obige ist der detaillierte Inhalt vonWie implementiert man die Anmeldung in React? Detaillierte Erklärung des React-Login-Moduls. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!