本篇文章主要的介紹了關於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 驗證登入資訊要求跳轉。
以下是第二種登入方式的解說
auth:{
type: "COMPLOGIN/RECEIVE_DATA",
isFetching: false,
data: {uid: 1, permissions: Array(5), role: "系统管理员", roleType: 1, userName: "系统管理员"}
}
- ##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 ( <p className="login">
<p className="login-form">
<p className="login-logo">
<span>React Admin</span>
</p>
<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>
</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));
- 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
});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';
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};
- 根據元件載入對應的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};
- 純函數
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};
}
}#非同步呼叫##
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
import {createSelector} from 'reselect';const getCompLoginData = (state) => state.compLoginData;export const
selectVisibleMenuResourceTreeTable = createSelector(
[getCompLoginData],
(compLoginData) => compLoginData
);這篇文章到這就結束了（想看更多就到PHP中文網
React使用手冊#以上是React如何實現登入？ react登入模組的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
