React学习笔记_登录模块

基于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 && 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 (
            <div className="login">
                <div className="login-form">
                    <div className="login-logo">
                        <span>React Admin</span>
                    </div>
                    <Form onSubmit={this.handleSubmit} style={{maxWidth: '300px'}}>
                        <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: 'right'}}>忘记密码</a>
                            <Button type="primary" htmlType="submit" className="login-form-button"
                                    style={{width: '100%'}}>
                                登录
                            </Button>
                            或 <a href="">现在就去注册!</a>
                            <p>
                                <Icon type="github" onClick={this.gitHub}/>(第三方登录)
                            </p>
                        </FormItem>
                    </Form>
                </div>
            </div>
        );
    }
}

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

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) => {
    return (
        <Bundle load={() => import("./lazy")}>
            {(View) => {
                return <View {...props}/>
            }}
        </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) => {
    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}) => {
    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;

selector

记忆组件 selector

import {createSelector} from 'reselect';

const getCompLoginData = (state) => state.compLoginData;

export const selectVisibleMenuResourceTreeTable = createSelector(
    [getCompLoginData],
    (compLoginData) => compLoginData
);