이번 글에서는 react의 로그인 모듈을 주로 소개하고, React의 로그인 상황을 자세하게 소개합니다. 이제 기사의 내용을 살펴보겠습니다
요청이 성공한 후 작업을 시작하고 로그인 페이지를 다시 로드하세요.
- #🎜 🎜 #Login 페이지는 API 요청을 직접 호출하는 로그인 handlerSubmit()을 제출합니다. 로그인 요청 성공 후, History.push(nextPathname, null);
- 구현 방법은 http://blog.csdn.net/qq_27384769/를 참조하세요. 기사/ 세부 사항/ 78775835#🎜🎜 ## ## ## ## ## ####Second Login#🎜🎜 ## ## ## #####로그인 페이지 제출 handlerSubmit()에 로그인하고, saga를 통해 비동기 요청을 시작합니다.
로그인 페이지 수명 주기에서 componentWillReceiveProps는 로그인 정보 요청을 확인하여 점프합니다.codelogin.jsx#의 데이터 구조 🎜🎜#comComponentWillReceiveProps 로그인 성공 후 조정 handleSubmit 제출 로그인 처리
- reducer
다음은 두 번째 로그인 방법에 대한 설명입니다
auth:{ type: "COMPLOGIN/RECEIVE_DATA", isFetching: false, data: {uid: 1, permissions: Array(5), role: "系统管理员", roleType: 1, userName: "系统管理员"} }
requestData API를 호출하기 전에 requestData API를 호출하여 데이터를 가져옵니다#🎜🎜 #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 ( 434e1358c9378ac3fd33b911e780149e b2394c444f081e0017d1642dfc84f1f8 c92ea6d2badfaeb250216ed853bbdbb2 45a2772a6b6107b401db3c9b82c049c2React Admin54bdf357c58b8a65c66d7c19c8e4d114 94b3e26ee717c64999d7867364b1b4a3 184b34f4f105d6516fe712766a9e325a b991a1338e3038b10035bb6940ac6193 {getFieldDecorator('userName', { rules: [{required: true, message: '请输入用户名!'}], })( 501c34e1e18ea140ee629fc657f756aa} placeholder="管理员输入admin, 游客输入guest"/> )} ef807bb895304b2f6a1f66b2641ea569 b991a1338e3038b10035bb6940ac6193 {getFieldDecorator('password', { rules: [{required: true, message: '请输入密码!'}], })( a702425267d3239dc21f20d5c644eaaf} type="password" placeholder="管理员输入admin, 游客输入guest"/> )} ef807bb895304b2f6a1f66b2641ea569 b991a1338e3038b10035bb6940ac6193 {getFieldDecorator('remember', { valuePropName: 'checked', initialValue: true, })( 69393f9a46ae20607b893bed10218172记住我fc4d79e34ad347b99c684660ce4ccba3 )} cca3a973c05f7502e090180a02c32514忘记密码5db79b134e9f6b82c0b36e0489ee08ed 95b3f5ad236f0c0143abd915a9cd3964 登录 a1cb88e6789f399807801ea3799938af 或 6170e8999ab19ec641e0422470b16d5c现在就去注册!5db79b134e9f6b82c0b36e0489ee08ed e388a4556c0f65e1904146cc1a846bee 7baa8ae66257a5658535c02e56eb333a(第三方登录) 94b3e26ee717c64999d7867364b1b4a3 ef807bb895304b2f6a1f66b2641ea569 70a2c5d410e290aa58cb7e59d41eaf55 94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3 ); } }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 시작하려면 버튼을 클릭하세요. 요청# 🎜🎜#
컴포넌트에 따라 해당 sagasreducerview 로드 리듀서의 데이터 구조 : [comp로그인 이름]: compLoginReducer
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';# 🎜 🎜## 🎜🎜# indexlazy 비동기 로딩 import React from 'react';import Bundle from '../../../bundle/views/bundle';import * as actions from './actions';const view = (props) => { return ( 42c9814113858c7668de4a776bc31ec5 import("./lazy")}> {(View) => { return 2fb732b7199e4f5e49a9d32783267755 }} 2075647a73e9b735dd611345836fffdd ); };export {actions, view};
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}; } }#🎜🎜 ## 🎜🎜 ## 🎜 🎜#sagas
메모리 구성 요소 선택기
- 비동기 호출
- selector# 🎜 🎜 #
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;
import {createSelector} from 'reselect';const getCompLoginData = (state) => state.compLoginData;export const selectVisibleMenuResourceTreeTable = createSelector( [getCompLoginData], (compLoginData) => compLoginData );
이 글은 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트
React 사용자 매뉴얼열로 이동하세요. ) , 궁금한 점이 있으시면 아래에 메시지를 남겨주세요.
위 내용은 React에서 로그인을 구현하는 방법은 무엇입니까? React 로그인 모듈에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!