基于React的登录

第一种登录

login页面提交登录 handlesubmit(), 中直接调用api请求。请求登录成功后跳转 history.push(nextpathname, null);

实现方式参照 http://blog.csdn.net/qq_27384769/article/details/78775835

第二种登录

Login页面提交登录 handleSubmit() 后，通过saga发起异步请求。

请求成功后发起action 调用reducer. 重新加载Login页面。

在Login页面生命周期componentWillReceiveProps 验证登录信息请求跳转。

以下是第二种登录方式的讲解

reducer 中的数据结构

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

登录后复制

代码

login.jsx

componentWillReceiveProps 登录成功后调整

handleSubmit 处理提交登录

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 &amp;&amp; nextAuth.data.uid) {   // 判断是否登陆
            localStorage.setItem('user', JSON.stringify(nextAuth.data));            this.props.history.push('/', null);
        }
    }    handleSubmit = (e) =&gt; {        e.preventDefault();        this.props.form.validateFields((err, values) =&gt; {            if (!err) {                console.log('Received values of form: ', values);                const {findData} = this.props;                if (values.userName === 'admin' &amp;&amp; values.password === 'admin') findData({
                    funcName: 'admin',
                    stateName: 'auth'
                });                if (values.userName === 'guest' &amp;&amp; values.password === 'guest') findData({
                    funcName: 'guest',
                    stateName: 'auth'
                });
            }
        });
    };    gitHub = () =&gt; {        console.log("gitHub");
    };    render() {        const {getFieldDecorator} = this.props.form;        return (            <p>
                </p><p>
                    </p><p>
                        <span>React Admin</span>
                    </p>

登录后复制

{getFieldDecorator('userName', { rules: [{required: true, message: '请输入用户名!'}], })( } placeholder="管理员输入admin, 游客输入guest"/> )} {getFieldDecorator('password', { rules: [{required: true, message: '请输入密码!'}], })( } type="password" placeholder="管理员输入admin, 游客输入guest"/> )} {getFieldDecorator('remember', { valuePropName: 'checked', initialValue: true, })( 记住我 )} 忘记密码或现在就去注册!

(第三方登录)

); } }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));

actions

findData 点击按钮发起请求

requestData 调用API前

requestData 调用API 获取到数据

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

登录后复制

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';

登录后复制

index

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

登录后复制

lazy 异步加载

根据组件加载对应的 sagas\reducer\view

reducer 中的数据结构：[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};

登录后复制

reducer

纯函数

export default (state = {}, action) =&gt; {    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};
    }
}

登录后复制

sagas

异步调用

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}) =&gt; {    return http[funcName](params).then(res =&gt; {        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;

登录后复制

selector

记忆组件 selector

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

登录后复制

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

以上就是React如何实现登录？react登录模块的详解的详细内容，更多请关注php中文网其它相关文章！