登录、注册联调

2024-01-11 16:43:26 +08:00 · 2024-01-11 16:43:26 +08:00 · bb74e26115
commit bb74e26115
parent e0b6261596
12 changed files with 180 additions and 110 deletions
--- a/client/.umirc.ts
+++ b/client/.umirc.ts
@ -13,6 +13,13 @@ export default defineConfig({
    type: 'hash',
  },
  plugins: ['@umijs/plugins/dist/dva'],
-  dva: {}
+  dva: {},
+  proxy: {
+    '/v1': {
+      'target': 'http://54.80.112.79:9380/',
+      'changeOrigin': true,
+      'pathRewrite': { '^/v1': '/v1' },
+    },
+  },
 });

--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -12,6 +12,8 @@
        "axios": "^1.6.3",
        "classnames": "^2.5.1",
        "i18next": "^23.7.16",
+        "js-base64": "^3.7.5",
+        "jsencrypt": "^3.3.2",
        "lodash": "^4.17.21",
        "react-i18next": "^14.0.0",
        "react-infinite-scroll-component": "^6.1.0",
@ -8772,6 +8774,11 @@
        "node": ">=10"
      }
    },
+    "node_modules/js-base64": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.5.tgz",
+      "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA=="
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
@ -8789,6 +8796,11 @@
        "js-yaml": "bin/js-yaml.js"
      }
    },
+    "node_modules/jsencrypt": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmmirror.com/jsencrypt/-/jsencrypt-3.3.2.tgz",
+      "integrity": "sha512-arQR1R1ESGdAxY7ZheWr12wCaF2yF47v5qpB76TtV64H1pyGudk9Hvw8Y9tb/FiTIaaTRUyaSnm5T/Y53Ghm/A=="
+    },
    "node_modules/jsesc": {
      "version": "2.5.2",
      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
--- a/client/package.json
+++ b/client/package.json
@ -15,6 +15,8 @@
    "axios": "^1.6.3",
    "classnames": "^2.5.1",
    "i18next": "^23.7.16",
+    "js-base64": "^3.7.5",
+    "jsencrypt": "^3.3.2",
    "lodash": "^4.17.21",
    "react-i18next": "^14.0.0",
    "react-infinite-scroll-component": "^6.1.0",
--- a/client/routes.js
+++ b/client/routes.js
@ -68,6 +68,15 @@ const routes = [
    component: '@/pages/setting',
    pathname: "setting"
  },
+  {
+    id: 1,
+    name: '文件',
+    icon: 'file',
+    auth: [3, 4, 100],
+    path: '/file',
+    component: '@/pages/file',
+    pathname: 'file'
+  },
  {
    path: '/*',
    component: '@/pages/404',
--- a/client/src/layouts/index.tsx
+++ b/client/src/layouts/index.tsx
@ -35,7 +35,7 @@ const App: React.FC = (props) => {
    setCurrent(path)
    navigate(path);
  };
-  const tagsData = [{ path: '/knowledge', name: 'knowledge' }, { path: '/chat', name: 'chat' }];
+  const tagsData = [{ path: '/knowledge', name: 'knowledge' }, { path: '/chat', name: 'chat' }, { path: '/file', name: 'file' }];

  return (
    <Layout className={styles.layout} >
--- a/client/src/pages/file/index.tsx
+++ b/client/src/pages/file/index.tsx
@ -40,6 +40,7 @@ const App: React.FC = () => {
                action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
                listType="picture"
                fileList={[...fileList]}
+                multiple
            >
                <Button icon={<UploadOutlined />}>Upload</Button>
            </Upload>
--- a/client/src/pages/login/index.tsx
+++ b/client/src/pages/login/index.tsx
@ -2,83 +2,110 @@ import { connect } from 'umi';
 import { Input, Form, Button, Checkbox } from 'antd';
 // import md5 from 'md5';
 import styles from './index.less';
-
+import JSEncrypt from 'jsencrypt';
+import { Base64 } from 'js-base64';
+import Title from 'antd/es/skeleton/Title';
+import { useState, useEffect } from 'react';
+// import Base64 from 'crypto-js/enc-base64';
 const View = ({
  loginModel,
  dispatch,
  location,
 }) => {
-  const onFinish = (params: any) => {
-    console.log('Success:', params);
-    params.mail = params.username.replace(/^\s+|\s+$/g, '');
-    params.passwordMd5 = params.password.replace(/^\s+|\s+$/g, '');
+  const [title, setTitle] = useState('login')
+  const pub = "-----BEGIN PUBLIC KEY-----MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArq9XTUSeYr2+N1h3Afl/z8Dse/2yD0ZGrKwx+EEEcdsBLca9Ynmx3nIB5obmLlSfmskLpBo0UACBmB5rEjBp2Q2f3AG3Hjd4B+gNCG6BDaawuDlgANIhGnaTLrIqWrrcm4EMzJOnAOI1fgzJRsOOUEfaS318Eq9OVO3apEyCCt0lOQK6PuksduOjVxtltDav+guVAA068NrPYmRNabVKRNLJpL8w4D44sfth5RvZ3q9t+6RTArpEtc5sh5ChzvqPOzKGMXW83C95TxmXqpbK6olN4RevSfVjEAgCydH6HN6OhtOQEcnrU97r9H0iZOWwbw3pVrZiUkuRD1R56Wzs2wIDAQAB-----END PUBLIC KEY-----"
+  const changeTitle = () => {
+    setTitle((title) => title === 'login' ? 'register' : 'login')
+  }
+  const [form] = Form.useForm();
+  const [checkNick, setCheckNick] = useState(false);

-    dispatch({
-      type: 'loginModel/login',
-      payload: {
-        mail: params.mail,
-        authority: 1,
-        passwordMd5: params.passwordMd5
-        // passwordMd5: md5(params.passwordMd5).toLocaleUpperCase()
+  useEffect(() => {
+    form.validateFields(['nickname']);
+  }, [checkNick, form]);
+
+  const onCheck = async () => {
+    try {
+      const params = await form.validateFields();
+      console.log('Success:', params);
+      const encryptor = new JSEncrypt()
+      encryptor.setPublicKey(pub)
+      var rsaPassWord = encryptor.encrypt(Base64.encode(params.password))
+      if (title === 'login') {
+        dispatch({
+          type: 'loginModel/login',
+          payload: {
+            email: params.email,
+            password: rsaPassWord
+          }
+        });
+      } else {
+        dispatch({
+          type: 'loginModel/register',
+          payload: {
+            nickname: params.nickname,
+            email: params.email,
+            password: rsaPassWord
+          }
+        });
      }
-    });
+    } catch (errorInfo) {
+      console.log('Failed:', errorInfo);
+    }
+  };
+  const formItemLayout = {
+    labelCol: { span: 4 },
+    wrapperCol: { span: 8 },
  };

-  const onFinishFailed = (errorInfo: any) => {
-    console.log('Failed:', errorInfo);
+  const formTailLayout = {
+    labelCol: { span: 4 },
+    wrapperCol: { span: 8, offset: 4 },
  };
-
-
-  type FieldType = {
-    username?: string;
-    password?: string;
-    remember?: string;
-  };
-
-  const onJump = () => {
-    window.location.href = 'http://www.martechlab.cn/';
-  };
-
  return (
    <div className={styles.loginContainer}>
+      {title === 'login' ? '登录' : '注册'}
      <div className={styles.modal}>
-        <Form
-          name="basic"
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 16 }}
-          style={{ maxWidth: 600 }}
-          initialValues={{ remember: true }}
-          onFinish={onFinish}
-          onFinishFailed={onFinishFailed}
-          autoComplete="off"
-        >
-          <Form.Item<FieldType>
-            label="mail"
-            name="username"
-            rules={[{ required: true, message: 'Please input your mail!' }]}
+        <Form form={form} name="dynamic_rule" style={{ maxWidth: 600 }}>
+          <Form.Item
+            {...formItemLayout}
+            name="email"
+            label="Email"
+            rules={[{ required: true, message: 'Please input your name' }]}
          >
-            <Input />
+            <Input placeholder="Please input your name" />
          </Form.Item>
-
-          <Form.Item<FieldType>
-            label="Password"
+          {
+            title === 'register' && <Form.Item
+              {...formItemLayout}
+              name="nickname"
+              label="Nickname"
+              rules={[{ required: checkNick, message: 'Please input your nickname' }]}
+            >
+              <Input placeholder="Please input your nickname" />
+            </Form.Item>
+          }
+          <Form.Item
+            {...formItemLayout}
            name="password"
-            rules={[{ required: true, message: 'Please input your password!' }]}
+            label="Password"
+            rules={[{ required: true, message: 'Please input your name' }]}
          >
-            <Input.Password />
+            <Input placeholder="Please input your name" />
          </Form.Item>
-
-          {/* <Form.Item<FieldType>
-            name="remember"
-            valuePropName="checked"
-            wrapperCol={{ offset: 8, span: 16 }}
-          >
-            <Checkbox>Remember me</Checkbox>
-          </Form.Item> */}
-
-          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-            <Button type="primary" htmlType="submit" >
-              Submit
+          <div>   {
+            title === 'login' && (<div>
+              没有账号?<a onClick={changeTitle}>注册</a>
+            </div>)
+          }
+            {
+              title === 'register' && (<div>
+                已有账号?<a onClick={changeTitle}>登录</a>
+              </div>)
+            }</div>
+          <Form.Item {...formTailLayout}>
+            <Button type="primary" onClick={onCheck}>
+              Check
            </Button>
          </Form.Item>
        </Form>
--- a/client/src/pages/login/model.ts
+++ b/client/src/pages/login/model.ts
@ -1,6 +1,6 @@
 import { message } from 'antd';
 import { addParam } from '@/utils';
-import loginService from '@/services/loginService';
+import userService from '@/services/userService';

 const Model = {
  namespace: 'loginModel',
@ -18,11 +18,32 @@ const Model = {
  },
  effects: {
    *login({ payload = {} }, { call, put }) {
+      console.log(111, payload)
+      const { retcode, data, retmsg } = yield call(userService.login, payload);
+      if (retcode === 0) {
+        message.success('登录成功！');
+        const name = data.name;
+        const token = data.access_token;
+        const role = data.role;
+        const title = data.title;
+        const userInfo = {
+          role: data.avatar,
+          title: data.title,
+          name: data.nickname,
+        };
+        localStorage.setItem('token', token)
+        localStorage.setItem('userInfo', JSON.stringify(userInfo))
+        // setTimeout(() => {
+        //   window.location.href = '/file';
+        // }, 300);
+      }
+    },
+    *register({ payload = {} }, { call, put }) {
      console.log(111)
-      const { code, data, errorMessage } = yield call(loginService.login, payload);
-      setTimeout(() => {
-        window.location.href = '/';
-      }, 300);
+      const { retcode, data, retmsg } = yield call(userService.register, payload);
+      // setTimeout(() => {
+      //   window.location.href = '/';
+      // }, 300);
      // if (code === 0) {
      //   message.success('登录成功！');
      //   const name = data.name;
--- a/client/src/services/loginService.ts
+++ b/client/src/services/loginService.ts
@ -1,18 +0,0 @@
-import api from '@/utils/api';
-import registerServer from '@/utils/registerServer';
-import request from '@/utils/request';
-
-const {
-  login, } = api;
-
-const chatService = registerServer(
-  {
-    login: {
-      url: login,
-      method: 'post'
-    }
-  },
-  request
-);
-
-export default chatService;
--- a/client/src/services/userService.ts
+++ b/client/src/services/userService.ts
@ -0,0 +1,24 @@
+import api from '@/utils/api';
+import registerServer from '@/utils/registerServer';
+import request from '@/utils/request';
+
+const {
+  login, register } = api;
+interface userServiceType {
+  login: (params: any) => void
+}
+const userService = registerServer(
+  {
+    login: {
+      url: login,
+      method: 'post'
+    },
+    register: {
+      url: register,
+      method: 'post'
+    }
+  },
+  request
+);
+
+export default userService;
--- a/client/src/utils/api.ts
+++ b/client/src/utils/api.ts
@ -1,14 +1,9 @@
 import config from '@/utils/config';

-const host = window.location.host;

-let api_host = `//mp.test.amnetapi.com/mp/v1`;
+let api_host = `/v1`;


-// api_host = '//mpcompany3.test.amnetapi.com/mp/v1';
-let login = '//mp41.test.amnetapi.com/mp/v1/user/ssoLogin';
-// sso_host = `//test120-sso.amnetapi.com`;
-
 export { api_host };

 export default {
@ -19,7 +14,8 @@ export default {
  segment_upload: `${api_host}/uploadPopulation`,

  // 用户
-  login: login,
+  login: `${api_host}/user/login`,
+  register: `${api_host}/user/register`,
  user: `${api_host}/user/validate`,
  getUrl: `${api_host}/requestGetUrl`,
  getAdPermits: `${api_host}/adServer/getAdPermits`,
--- a/client/src/utils/request.ts
+++ b/client/src/utils/request.ts
@ -15,7 +15,7 @@ const ABORT_REQUEST_ERR_MESSAGE = 'The user aborted a request.'; // 手动中断



-const codeMessage = {
+const retcodeMessage = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
@ -43,7 +43,7 @@ const errorHandler = (error: any) => {
    console.log('user abort  request');
  } else {
    if (response && response.status) {
-      const errorText = codeMessage[response.status] || response.statusText;
+      const errorText = retcodeMessage[response.status] || response.statusText;
      const { status, url } = response;
      notification.error({
        message: `请求错误 ${status}: ${url}`,
@ -91,37 +91,26 @@ request.interceptors.request.use((url, options) => {
 * */
 request.interceptors.response.use(async (response, request) => {
  const data = await response.clone().json();
-  if (data.code && data.code !== 0) {
-    const payload = {
-      token: request.headers.Authorization,
-      res: data,
-      body: request.data,
-      url: response.url
-    };
-  }
  // response 拦截
-  if (data.code === 401 || data.Code === 401) {
+  if (data.retcode === 401 || data.retcode === 401) {
    notification.error({
      message: data.errorMessage,
      description: data.errorMessage,
      duration: 3,
-      top: 65
    });
-    store.domainPrefix = '';
-  } else if (data.code !== 0) {
-    if (data.code === 100) {
-      //code为100 时账户名或者密码错误, 为了跟之前弹窗一样所以用message
+  } else if (data.retcode !== 0) {
+    if (data.retcode === 100) {
+      //retcode为100 时账户名或者密码错误, 为了跟之前弹窗一样所以用message
      message.error(data.errorMessage);
    } else {
      notification.error({
-        message: `提示 : ${data.code}`,
+        message: `提示 : ${data.retcode}`,
        description: data.errorMessage,
        duration: 3,
-        top: 65
      });
    }

-    return response; //这里return response, 是为了避免modal里面报code undefined
+    return response; //这里return response, 是为了避免modal里面报retcode undefined
  } else {
    return response;
  }