diff --git a/src/app.tsx b/src/app.tsx index 6fdf4be..3b854bf 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -217,9 +217,12 @@ export async function render(oldRender: () => void) { const checkRegion = 5 * 60 * 1000; export const request = { ...errorConfig, - baseURL: process.env.NODE_ENV === 'development' ? '' : 'https://qd.zhaopinzao8dian.com/api', + // baseURL: process.env.NODE_ENV === 'development' ? '' : 'https://qd.zhaopinzao8dian.com/api', // baseURL: 'http://39.98.44.136:8080', - // baseURL: process.env.NODE_ENV === 'development' ? '' : 'http://10.213.6.207:19010/api', + baseURL: + process.env.NODE_ENV === 'development' + ? 'http://10.213.6.207:19010' + : 'http://10.213.6.207:19010/api', requestInterceptors: [ (url: any, options: { headers: any }) => { const headers = options.headers ? options.headers : []; diff --git a/src/pages/User/Login/index.tsx b/src/pages/User/Login/index.tsx index 95b41b8..0a6eb79 100644 --- a/src/pages/User/Login/index.tsx +++ b/src/pages/User/Login/index.tsx @@ -1,6 +1,6 @@ import Footer from '@/components/Footer'; import { getCaptchaImg, login } from '@/services/system/auth'; -import { getFakeCaptcha } from '@/services/ant-design-pro/login'; +import { getFakeCaptcha, sancGenerateQrcode, sancAuthCheck } from '@/services/ant-design-pro/login'; import { AlipayCircleOutlined, LockOutlined, @@ -25,7 +25,9 @@ import { flushSync } from 'react-dom'; import { clearSessionToken, setSessionToken } from '@/access'; import logoImg from '@/assets/logo.svg'; import login_imge2b033b1 from '@/assets/login_img.e2b033b1.png'; +import { use } from 'echarts'; +let timer: any = null; const ActionIcons = () => { const langClassName = useEmotionCss(({ token }) => { return { @@ -93,7 +95,9 @@ const Login: React.FC = () => { const { initialState, setInitialState } = useModel('@@initialState'); const [captchaCode, setCaptchaCode] = useState(''); const [uuid, setUuid] = useState(''); - const [qrcodeVal, setQrcodeVal] = useState('7655212'); + const [qrcodeVal, setQrcodeVal] = useState(''); + const [qrcodeTime, setQrcodeTime] = useState(''); + const [qrcodeStatus, setQrcodeStatus] = useState('loading'); const containerClassName = useEmotionCss(() => { return { @@ -155,15 +159,81 @@ const Login: React.FC = () => { getCaptchaCode(); } } catch (error) { - // message.error(response.msg); const defaultLoginFailureMessage = intl.formatMessage({ id: 'pages.login.failure', defaultMessage: '登录失败,请重试!', }); - // console.log(error); message.error(defaultLoginFailureMessage); } }; + + const generateQrcode = async () => { + setQrcodeStatus('loading'); + const response = await sancGenerateQrcode(); + if (response.code === 200) { + const { qrCode, validDate } = response.data; + setQrcodeStatus('active'); + setQrcodeVal(qrCode); + setQrcodeTime(validDate); + if (timer) { + clearInterval(timer); + } + timer = setInterval(() => { + const timeDiff = getTimeDiff(validDate); + if (timeDiff > 0) { + clearInterval(timer); + setQrcodeStatus('expired'); + return; + } + checkQrcode(qrCode as string); + }, 2000); + } + }; + + const checkQrcode = async (text: string) => { + const response = await sancAuthCheck(text); + if (response.code === 200) { + const { authStatus } = response.data; + switch (authStatus) { + case 'success': + setQrcodeStatus('scanned'); + message.success('扫码成功'); + const defaultLoginSuccessMessage = intl.formatMessage({ + id: 'pages.login.success', + defaultMessage: '登录成功!', + }); + const current = new Date(); + const expireTime = current.setTime(current.getTime() + 1000 * 12 * 60 * 60); + setSessionToken(response.data?.token, response.data?.token, expireTime); + message.success(defaultLoginSuccessMessage); + await fetchUserInfo(); + const urlParams = new URL(window.location.href).searchParams; + history.push(urlParams.get('redirect') || '/'); + setTimeout(() => history.go(0), 0); + break; + case 'failed': + setQrcodeStatus('expired'); + message.error(response.data.errCode + ':' + response.data.errMsg); + break; + case 'pending': + break; + } + } else { + clearInterval(timer); + setQrcodeStatus('expired'); + } + }; + + function getTimeDiff(validTimeStr: string): number { + const now = new Date(); + const [h, m, s] = validTimeStr.split(':').map(Number); + + const target = new Date(); + target.setHours(h, m, s, 0); + + return now.getTime() - target.getTime(); + } + const { code } = userLoginState; const loginType = type; @@ -215,7 +285,15 @@ const Login: React.FC = () => { > { + setType(type); + if (timer) { + clearInterval(timer); + } + if (type === 'scanQode') { + generateQrcode(); + } + }} centered items={[ { @@ -256,7 +334,9 @@ const Login: React.FC = () => { errorLevel="H" size={300} iconSize={300 / 5} - value="https://ant.design/" + status={qrcodeStatus} + onRefresh={() => generateQrcode()} + value={qrcodeVal} icon={login_imge2b033b1} /> diff --git a/src/services/ant-design-pro/login.ts b/src/services/ant-design-pro/login.ts index 3b00b43..f2bec7d 100644 --- a/src/services/ant-design-pro/login.ts +++ b/src/services/ant-design-pro/login.ts @@ -36,3 +36,20 @@ export async function outLogin(options?: { [key: string]: any }) { ...(options || {}), }); } + + +/** 登录接口 POST /api/login/outLogin */ +export async function sancGenerateQrcode() { + return request>('/api/essc/generateQrcode', { + method: 'POST', + }); +} + +export async function sancAuthCheck(qrCode: string) { + return request>('/api/essc/authCheck', { + method: 'POST', + data: { + qrCode + } + }); +}