react配合php怎么做登录,React如何实现登录？react登录模块的详解

本篇文章主要的介绍了关于react的登录模块，详细的介绍了关于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.jsxcomponentWillReceiveProps 登录成功后 调整

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