diff --git a/.umirc.ts b/.umirc.ts
index d848a01..26f2d52 100644
--- a/.umirc.ts
+++ b/.umirc.ts
@@ -12,11 +12,11 @@ export default defineConfig({
title: '订单管理系统',
},
proxy: {
- '/service/': {
- target: 'http://localhost:8085/',
- // target: 'http://39.108.227.113:8085/',
+ '/api/': {
+ // target: 'http://localhost:8085/',
+ target: 'http://39.108.227.113:8085/',
changeOrigin: true,
- // pathRewrite: { '^/api': '' },
+ pathRewrite: { '^/api': '' },
},
},
routes: [
diff --git a/README.md b/README.md
index c20aad9..bb0e397 100644
--- a/README.md
+++ b/README.md
@@ -29,4 +29,6 @@
# 校验没生效
-chmod +x .husky/commit-msg chmod +x .husky/pre-commit
+chmod +x .husky/commit-msg
+
+chmod +x .husky/pre-commit
diff --git a/src/app.ts b/src/app.ts
index 4692376..8302a1f 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,6 +1,6 @@
// 运行时配置
-import { RequestConfig } from '@umijs/max';
+import { RequestConfig, history } from '@umijs/max';
import '@inspir/assembly-css/dist/special.css';
import { message } from 'antd';
@@ -34,10 +34,11 @@ export const request: RequestConfig = {
if (response && response.status) {
// 401重定向
if (response.status === 401) {
- if (!location.pathname.includes(loginPath)) {
+ if (!location.pathname.includes('login')) {
localStorage.removeItem('token');
+ localStorage.removeItem('userInfo');
message.error('token失效，请重新登录！');
- // history.push(loginPath);
+ history.push('/login');
return null;
}
}
@@ -74,7 +75,7 @@ export const request: RequestConfig = {
}
return {
- url,
+ url: '/api' + url,
options: {
...options,
signal,
@@ -93,6 +94,7 @@ export const request: RequestConfig = {
if (data.result !== RESPONSE_CODE.SUCCESS) {
message.error(data.message);
}
+
// do something
return response;
},
diff --git a/src/models/user.ts b/src/models/user.ts
index 5fe01ee..b06c96d 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -2,7 +2,28 @@ import { useState } from 'react';
// src/models/userModel.ts
export default function Page() {
- const { token, setToken } = useState('');
+ const [token, setToken] = useState('');
+ const [userInfo, setUserInfo] = useState({});
- return { token, setToken };
+ const setUserToken = (token: string) => {
+ localStorage.setItem('token', token);
+ setToken(token);
+ };
+
+ const setUserLocalInfo = (token: string, userInfo: any) => {
+ localStorage.setItem('token', token);
+ setToken(token);
+
+ localStorage.setItem('userInfo', JSON.stringify(userInfo));
+ setUserInfo(userInfo);
+ };
+
+ return {
+ token,
+ setToken,
+ userInfo,
+ setUserInfo,
+ setUserToken,
+ setUserLocalInfo,
+ };
}
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index b98d23a..68efd63 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,21 +1,32 @@
-import { LockOutlined, MobileOutlined, UserOutlined } from '@ant-design/icons';
+import { RESPONSE_CODE } from '@/constants/enum';
+import {
+ postOrderErpAuthLoginByPwd,
+ postOrderErpCaptchaGetImgCaptchaCode,
+} from '@/services';
+import { LockOutlined, UserOutlined } from '@ant-design/icons';
import {
LoginForm,
ProConfigProvider,
- ProFormCaptcha,
- ProFormCheckbox,
ProFormText,
} from '@ant-design/pro-components';
-import { history } from '@umijs/max';
-import { Tabs, message, theme } from 'antd';
-import { useState } from 'react';
-
-type LoginType = 'phone' | 'account';
+import { history, useModel } from '@umijs/max';
+import { theme } from 'antd';
+import { useEffect, useState } from 'react';
export default () => {
+ const { setUserLocalInfo } = useModel('user');
const { token } = theme.useToken();
- const [loginType, setLoginType] = useState<LoginType>('phone');
+ const [code, setCode] = useState('');
+ const [uuid, setUuid] = useState('');
+ const fetchCode = async () => {
+ const res = await postOrderErpCaptchaGetImgCaptchaCode();
+ setCode(res.data.img);
+ setUuid(res.data.uuid);
+ };
+ useEffect(() => {
+ fetchCode();
+ }, []);
return (
<ProConfigProvider hashed={false}>
<div
@@ -25,114 +36,69 @@ export default () => {
<div className="flex items-center justify-center">
<LoginForm
title="订单管理"
- onFinish={async () => {
- history.push('/order');
+ onFinish={async (values) => {
+ const res = await postOrderErpAuthLoginByPwd({
+ data: { ...values, imgCaptchaUuid: uuid },
+ });
+
+ setUserLocalInfo(res.data.token, res.data?.user);
+ if (res.result === RESPONSE_CODE.SUCCESS) {
+ history.push('/order');
+ }
}}
>
- <Tabs
- centered
- activeKey={loginType}
- onChange={(activeKey) => setLoginType(activeKey as LoginType)}
- >
- <Tabs.TabPane key={'account'} tab={'账号密码登录'} />
- <Tabs.TabPane key={'phone'} tab={'手机号登录'} />
- </Tabs>
- {loginType === 'account' && (
- <>
- <ProFormText
- name="username"
- fieldProps={{
- size: 'large',
- prefix: <UserOutlined className={'prefixIcon'} />,
- }}
- placeholder={'用户名'}
- rules={[
- {
- required: true,
- message: '请输入用户名!',
- },
- ]}
- />
- <ProFormText.Password
- name="password"
- fieldProps={{
- size: 'large',
- prefix: <LockOutlined className={'prefixIcon'} />,
- }}
- placeholder={'密码'}
- rules={[
- {
- required: true,
- message: '请输入密码！',
- },
- ]}
- />
- </>
- )}
- {loginType === 'phone' && (
- <>
- <ProFormText
- fieldProps={{
- size: 'large',
- prefix: <MobileOutlined className={'prefixIcon'} />,
- }}
- name="mobile"
- placeholder={'手机号'}
- rules={[
- {
- required: true,
- message: '请输入手机号！',
- },
- {
- pattern: /^1\d{10}$/,
- message: '手机号格式错误！',
- },
- ]}
- />
- <ProFormCaptcha
- fieldProps={{
- size: 'large',
- prefix: <LockOutlined className={'prefixIcon'} />,
- }}
- captchaProps={{
- size: 'large',
- }}
- placeholder={'请输入验证码'}
- captchaTextRender={(timing, count) => {
- if (timing) {
- return `${count} ${'获取验证码'}`;
- }
- return '获取验证码';
- }}
- name="captcha"
- rules={[
- {
- required: true,
- message: '请输入验证码！',
- },
- ]}
- onGetCaptcha={async () => {
- message.success('获取验证码成功！验证码为：1234');
- }}
- />
- </>
- )}
- <div
- style={{
- marginBlockEnd: 24,
+ <div className="my-8"></div>
+ <ProFormText
+ name="userName"
+ fieldProps={{
+ size: 'large',
+ prefix: <UserOutlined className={'prefixIcon'} />,
+ }}
+ placeholder={'用户名'}
+ rules={[
+ {
+ required: true,
+ message: '请输入用户名!',
+ },
+ ]}
+ />
+ <ProFormText.Password
+ name="password"
+ fieldProps={{
+ size: 'large',
+ prefix: <LockOutlined className={'prefixIcon'} />,
+ }}
+ placeholder={'密码'}
+ rules={[
+ {
+ required: true,
+ message: '请输入密码！',
+ },
+ ]}
+ />
+ <ProFormText
+ name="imgCaptchaCode"
+ fieldProps={{
+ size: 'large',
+ }}
+ placeholder={'验证码'}
+ rules={[
+ {
+ required: true,
+ message: '请输入验证码！',
+ },
+ ]}
+ />
+ <img
+ src={code}
+ className="mb-4 cursor-pointer"
+ onClick={() => {
+ fetchCode();
}}
- >
- <ProFormCheckbox noStyle name="autoLogin">
- 自动登录
- </ProFormCheckbox>
- {/* <a
- style={{
- float: 'right',
- }}
- >
- 忘记密码
- </a> */}
- </div>
+ />
+ {/* <ProFormCheckbox noStyle name="autoLogin">
+ 自动登录
+ </ProFormCheckbox> */}
</LoginForm>
</div>
</div>