Heim > Artikel > Web-Frontend > Wie implementiert man die Anmeldung in React? Detaillierte Erklärung des React-Login-Moduls
In diesem Artikel wird hauptsächlich das Anmeldemodul von React vorgestellt und die Anmeldesituation von React im Detail vorgestellt. Werfen wir nun einen Blick auf den Text des Artikels
Anmeldeseite-Übermittlungs-Login-HandleSubmit(), mittel API-Anfragen direkt stellen. Springen Sie nach erfolgreicher Anmeldeanforderung zu History.push(nextPathname, null);
Informationen zur Implementierungsmethode finden Sie unter http://blog.csdn.net/qq_27384769/article/ Details/78775835
Nachdem die Anmeldeseite die Anmeldung übermittelt hat, wird handleSubmit() asynchron ausgeführt Die Anfrage wird durch Saga initiiert.
Nachdem die Anfrage erfolgreich war, starten Sie eine Aktion und rufen Sie den Reduzierer auf. Laden Sie die Anmeldeseite neu.
Überprüfen Sie in der LebenszykluskomponenteWillReceiveProps der Anmeldeseite die Anmeldeinformationen und fordern Sie einen Sprung an.
Im Folgenden finden Sie eine Erläuterung des
auth:{ type: "COMPLOGIN/RECEIVE_DATA", isFetching: false, data: {uid: 1, permissions: Array(5), role: "系统管理员", roleType: 1, userName: "系统管理员"} }
componentWillReceiveProps login Anpassen
handleSubmit nach Erfolg, um die Übermittlungsanmeldung zu bearbeiten
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));
findData Klicken Sie auf die Schaltfläche, um eine Anfrage zu initiieren
requestData vor dem Aufruf der API
requestData ruft die API auf, um Daten abzurufen
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 ( 42c9814113858c7668de4a776bc31ec5 import("./lazy")}> {(View) => { return 2fb732b7199e4f5e49a9d32783267755 }} 2075647a73e9b735dd611345836fffdd ); };export {actions, view};
Laden Sie die entsprechende Sagasreducerview
Datenstruktur im Reduzierer entsprechend der Komponente: [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};
Reine Funktion
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}; } }
Asynchrone Anrufe
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;
Speicherkomponenten-Selektor
import {createSelector} from 'reselect';const getCompLoginData = (state) => state.compLoginData;export const selectVisibleMenuResourceTreeTable = createSelector( [getCompLoginData], (compLoginData) => compLoginData );
Dieser Artikel endet hier (wenn Sie mehr sehen möchten, gehen Sie zur Spalte React-Benutzerhandbuch des Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.
Das obige ist der detaillierte Inhalt vonWie implementiert man die Anmeldung in React? Detaillierte Erklärung des React-Login-Moduls. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!