本篇文章主要的介紹了關(guān)於react的登入模組，詳細(xì)的介紹了關(guān)於react的登入情況?，F(xiàn)在就讓我們一起來看看文章的文字吧

#基於React的登入

第一種登入

• #Login頁面提交登入handleSubmit(), 中直接呼叫API請求。請求登入成功後跳轉(zhuǎn)history.push(nextPathname, null);

• 實作方式參考?http://blog.csdn.net/qq_27384769/article/details/78775835

第二種登入

• Login頁面提交登入handleSubmit() 後，透過saga發(fā)起非同步請求。

• 請求成功後 發(fā)起action 呼叫reducer. 重新載入Login頁面。

• 在Login頁面生命週期componentWillReceiveProps 驗證登入資訊要求跳轉(zhuǎn)。

以下是第二種登入方式的解說

reducer 中的資料結(jié)構(gòu)

auth:{
	type:?"COMPLOGIN/RECEIVE_DATA",?
	isFetching:?false,?
	data:?{uid:?1,?permissions:?Array(5),?role:?"系統(tǒng)管理員",?roleType:?1,?userName:?"系統(tǒng)管理員"}
}

程式碼

login.jsx

• ##componentWillReceiveProps 登入成功後調(diào)整

• 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: &#39;300px&#39;}}>
????????????????????????<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: &#39;right&#39;}}>忘記密碼</a>
????????????????????????????<Button type="primary" htmlType="submit" className="login-form-button"
                                    style={{width: &#39;100%&#39;}}>
????????????????????????????????登錄????????????????????????????</Button>
????????????????????????????或?<a href="">現(xiàn)在就去注冊!</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};

• 根據(jù)元件載入對應(yīng)的sagas\reducer\view

• reducer 中的資料結(jié)構(gòu)：[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};

• 純函數(shù)

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

記憶元件selector

import {createSelector} from 'reselect';const getCompLoginData = (state) => state.compLoginData;export const 
selectVisibleMenuResourceTreeTable = createSelector(
    [getCompLoginData],
    (compLoginData) => compLoginData
);

這篇文章到這就結(jié)束了（想看更多就到PHP中文網(wǎng)

欄位中學(xué)習(xí)），有問題的可以在下方留言提問。

以上是React如何實現(xiàn)登入？ react登入模組的詳解的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！