1

config/webpack.common.config.js

@@ -11,6 +11,7 @@ module.exports = {
     workbench:'./src/workbench/index.js',
     hr:'./src/human-resource/index.js',
     product:'./src/product/index.js',
+    login:'./src/login/index.js',
   },
   // output: {
   //   filename: 'js/bundle.js',
@@ -74,6 +75,11 @@ module.exports = {
       filename: 'product/index.html',
       chunks:['product','framework']
     }),
+    new HtmlWebpackPlugin({
+      template: 'public/index.html',
+      filename: 'login.html',
+      chunks:['login','framework']
+    }),
   ]
 
 

config/webpack.prod.config.js

@@ -124,14 +124,17 @@ module.exports = merge(common, {
         {
           from: '/product', to: '/product',
         },
+        {
+          from: '/login', to: '/login',
+        },
       ]
     }
   },
   plugins: [
     new HtmlWebpackPlugin({
-      filename: 'index.html',
       template: 'public/index.html',
-      chunks: ['workbench', 'framework'],
+      filename: 'index.html',
+      chunks: ['login', 'framework'],
       // inject: 'body',
       // minify: {
       //   removeComments: true,

src/common/axios_auth.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+
 //取消请求
 let CancelToken = axios.CancelToken
 axios.create({
@@ -13,6 +14,15 @@ axios.interceptors.request.use(config => {
     //得到参数中的requestname字段，用于决定下次发起请求，取消相应的  相同字段的请求
     //post和get请求方式的不同，使用三木运算处理
     
+    
+
+    // if(config.method === 'post'){
+    //     config.headers.csrf_token = 'xxx';
+    //     config.headers['Content-Type']='application/x-www-form-urlencoded';
+    // }
+    //console.log(config);
+    //let requestName = config.method === 'post'?config.data.requestName :config.params.requestName
+    //console.log(requestName);
     //let requestName = config.method === 'post'?config.data.requestName :config.params.requestName
     //判断，如果这里拿到上一次的requestName，就取消上一次的请求
     // if(requestName) {

src/common/store/actionCreators.js

@@ -0,0 +1,52 @@
+import * as constants from './constants';
+import { fromJS } from 'immutable';
+
+import * as config from '../config';
+import axios from '../axios_auth';
+
+import md5 from 'js-md5';
+import CryptoJs from 'crypto-js';
+const CRYPTO_KEY = 'cld2_login_csrf_';
+
+//csrfToken
+export const loginSafety = () => {
+    return (dispatch) => {
+
+        axios.get(config.CLD2API + '/loginSafety').then((res) => {
+            const data = res.data;
+            if (res.status === 200) {
+                var index = CryptoJs.AES.decrypt(data.t11, CryptoJs.enc.Utf8.parse(CRYPTO_KEY), {
+                    iv: CryptoJs.enc.Utf8.parse('4875sdfw895scx85'),
+                    mode: CryptoJs.mode.CBC,
+                    format: CryptoJs.format.Hex,
+                }).toString(CryptoJs.enc.Utf8);;
+                let hashKeys = Object.keys(data);
+                let values = Object.values(data); 
+                let csrfToken = '';
+                hashKeys.forEach(function (v, i) {
+                    if (v == 't' + index) {
+                        csrfToken = values[i];
+                    }
+                });
+                dispatch({
+                    type: constants.CHANGE_CSRF_TOKEN,
+                    data: md5(csrfToken+index)
+                });
+            } else { }
+        }).catch((e) => {
+            console.log(e)
+        })
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+

src/common/store/constants.js

@@ -0,0 +1,2 @@
+export const CHANGE_CSRF_TOKEN = 'common/change_csrf_token';
+

src/common/store/index.js

@@ -0,0 +1,5 @@
+import reducer from './reducer';
+import * as actionCreators from './actionCreators';
+import * as constants from './constants';
+
+export { reducer,actionCreators,constants }

src/common/store/reducer.js

@@ -0,0 +1,18 @@
+import * as constants from './constants';
+import { fromJS } from 'immutable';
+
+const defaultState = fromJS({
+	csrfToken:'',
+});
+
+export default (state = defaultState, action) => {
+	
+	switch (action.type) {
+		case constants.CHANGE_CSRF_TOKEN:
+			return state.set('csrfToken', action.data);
+		default:
+			return state;
+	}
+	
+
+}

src/login/index.js

@@ -0,0 +1,15 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Login from './login';
+import { Provider } from 'react-redux';
+import store from './store';
+
+const App = (
+    <Provider store={store}>
+        <Login />
+    </Provider>
+)
+
+ReactDOM.render(App, document.getElementById('root'));

src/login/login.js

@@ -0,0 +1,93 @@
+import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
+// import { actionCreators } from './store';
+
+import * as actionCreators from './store/actionCreators';
+import * as commonActionCreators from '../common/store/actionCreators';
+
+import { Form, Input, Button } from 'antd';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+import 'antd/dist/antd.css';
+import { constants } from '../contact/company/store';
+
+const onFinish = values => {
+    console.log('Received values of form: ', values);
+};
+
+class login extends Component {
+
+
+
+    render() {
+        const { loading, handleLogin,csrfToken } = this.props;
+
+        //console.log(store.getIn('common','menuActive'));
+
+        return (
+            <Fragment>
+                <Form
+                    name="normal_login"
+                    className="login-form"
+                    initialValues={{ remember: true }}
+                    onFinish={(values) => handleLogin(values,csrfToken)}
+                >
+                    <Form.Item
+                        name="username"
+                        rules={[{ required: true, message: '请输入账号' }]}
+                    >
+                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" />
+                    </Form.Item>
+                    <Form.Item
+                        name="password"
+                        rules={[{ required: true, message: '请输入密码' }]}
+                    >
+                        <Input
+                            prefix={<LockOutlined className="site-form-item-icon" />}
+                            type="password"
+                            placeholder="密码"
+                        />
+                    </Form.Item>
+                    <Form.Item>
+                        <Button type="primary" htmlType="submit" className="login-form-button"
+                                loading={loading}
+                        >
+                            登录
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </Fragment>
+        );
+    }
+
+    componentDidMount() {
+        const { handleLoginSafety } = this.props;
+        handleLoginSafety();
+    }
+
+
+}
+
+const mapStateToProps = (state) => {
+
+    return {
+        //loading: state.get('loading'),
+        loading: state.getIn(['login', 'loading']),
+        csrfToken: state.getIn(['common', 'csrfToken']),
+    }
+}
+
+
+const mapDispathToProps = (dispatch) => {
+    return {
+        handleLogin(parameter,csrfToken) {
+            //dispatch(actionCreators.changeLoading());
+            dispatch(actionCreators.login(parameter,csrfToken));
+        },
+        handleLoginSafety(){
+            dispatch(commonActionCreators.loginSafety());
+        },
+    }
+
+}
+// export default contact;
+export default connect(mapStateToProps, mapDispathToProps)(login);

src/login/store/actionCreators.js

@@ -0,0 +1,56 @@
+import * as constants from './constants';
+import { fromJS } from 'immutable';
+import * as config from '../../common/config.js';
+import axios from '../../common/axios_auth.js';
+import md5 from 'js-md5';
+import qs from 'qs';
+import cookie from 'react-cookies'
+
+const salt = 'cld2cp89_+!';
+
+//loading
+export const changeLoading = () => {
+    return (dispatch) => {
+        dispatch({
+            type: constants.CHANGE_LOADING,
+            data: true,
+        });
+    }
+}
+
+export const login = (parameter) => {
+    return (dispatch) => {
+        let mdpw = md5(md5(parameter.password) + salt);
+        let data = {
+            'username': parameter.username,
+            'password': mdpw,
+        };
+        
+        let csrftoken = cookie.load('csrfToken');
+        axios.post(config.CLD2API + '/login', qs.stringify(data), {
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'x-csrf-token': csrftoken,
+            },
+        }).then((res) => {
+            const data = res.data;
+            if (data.code === 200) {
+
+                //window.location.href = '/contact/company';
+                //let d2=JSON.parse(data.list);
+                // console.log(data.data);
+                // dispatch(changeList(data.data));
+                //dispatch(changeList(JSON.parse(data.list)));
+                // dispatch({
+                //     type: constants.CHANGE_CLIENT_DATA,
+                //     data: fromJS(d2),
+                // });
+            } else {
+                console.log(data);
+            }
+        }).catch((e) => {
+            console.log(e);
+            console.log('error');
+        })
+    }
+}

src/login/store/constants.js

@@ -0,0 +1,3 @@
+export const CHANGE_LOADING = 'login/change_loading';
+
+

src/login/store/index.js

@@ -0,0 +1,11 @@
+import { createStore, compose, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import reducer from './reducer';
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const store = createStore(reducer, composeEnhancers(
+    applyMiddleware(thunk)
+));
+
+export default store;

src/login/store/loginReducer.js

@@ -0,0 +1,18 @@
+import * as constants from './constants';
+import { fromJS } from 'immutable';
+const defaultState = fromJS({
+    loading: false,
+})
+
+export default (state = defaultState, action) => {
+
+    switch (action.type) {
+        case constants.CHANGE_LOADING:
+            return state.set('loading', action.data);
+        default:
+            return state;
+    }
+
+
+
+}

src/login/store/reducer.js

@@ -0,0 +1,20 @@
+import { combineReducers } from 'redux-immutable';
+// import { reducer as clientReducer } from '../client/store';
+// import { reducer as companyReducer } from '../company/store';
+// import { reducer as commonContactReducer } from '../common/store';
+ import { reducer as commonStore } from '../../common/store';
+
+import loginReducer from './loginReducer';
+
+
+
+const reducer = combineReducers({
+    login:loginReducer,
+    common:commonStore,
+    // commonContact: commonContactReducer,
+    // client: clientReducer,
+    // company: companyReducer,
+    // popups:popupsReducer,
+});
+
+export default reducer;