React에서 로그인을 구현하는 방법은 무엇입니까? React 로그인 모듈에 대한 자세한 설명

이번 글에서는 react의 로그인 모듈을 주로 소개하고, React의 로그인 상황을 자세하게 소개합니다. 이제 기사의 내용을 살펴보겠습니다

React 기반 로그인

첫 번째 로그인

• #🎜 🎜 #Login 페이지는 API 요청을 직접 호출하는 로그인 handlerSubmit()을 제출합니다. 로그인 요청 성공 후, History.push(nextPathname, null);

• 구현 방법은 http://blog.csdn.net/qq_27384769/를 참조하세요. 기사/ 세부 사항/ 78775835#🎜🎜 ## ## ## ## ## ####Second Login#🎜🎜 ## ## ## #####로그인 페이지 제출 handlerSubmit()에 로그인하고, saga를 통해 비동기 요청을 시작합니다.

요청이 성공한 후 작업을 시작하고 로그인 페이지를 다시 로드하세요.

로그인 페이지 수명 주기에서 componentWillReceiveProps는 로그인 정보 요청을 확인하여 점프합니다.

• 다음은 두 번째 로그인 방법에 대한 설명입니다

reducer

• auth:{
  	type: "COMPLOGIN/RECEIVE_DATA", 
  	isFetching: false, 
  	data: {uid: 1, permissions: Array(5), role: "系统管理员", roleType: 1, userName: "系统管理员"}
  }

code

login.jsx

#의 데이터 구조 🎜🎜#

comComponentWillReceiveProps 로그인 성공 후 조정

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="">现在就去注册!</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));

• actions

• 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
});

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';

# 🎜 🎜## 🎜🎜# index

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};

lazy 비동기 로딩

컴포넌트에 따라 해당 sagasreducerview 로드

리듀서의 데이터 구조 : [comp로그인 이름]: 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};

reducer

# 🎜 🎜 ## ## ## ####순수 함수### ## ## ## ## #####

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

• 비동기 호출

• 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!