Skip to content

Commit e8fc035

Browse files
piupuerpiupuer
committed
[fix]login captcha
1 parent 23c3476 commit e8fc035

File tree

5 files changed

+105
-27
lines changed

5 files changed

+105
-27
lines changed

‎src/layouts/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { selectGlobal, toggleSetting, toggleMenu, ELayout, switchTheme } from 'm
77
import Setting from './components/Setting';
88
import AppLayout from './components/AppLayout';
99
import Style from './index.module.less';
10-
import { getUserInfo, permissionMenuPaths, TOKEN_NAME, userInfo, userInfoError } from '../modules/user';
10+
import { info as getUserInfo, permissionMenuPaths, TOKEN_NAME, userInfo, userInfoError } from '../modules/user';
1111

1212
export default memo(() => {
1313
const globalState = useAppSelector(selectGlobal);

‎src/modules/user/index.ts‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
22
import { RootState } from '../store';
3-
import { login as remoteLogin, userInfo as remoteUserInfo } from 'services/user';
3+
import { login as remoteLogin, userInfo as remoteUserInfo, userStatus as remoteStatus } from 'services/user';
44
import allRoutes, { IRouter } from 'router';
55
import { UserInfoReply } from 'services/model/userModel';
66

@@ -30,8 +30,14 @@ export const login = createAsyncThunk(`${namespace}/login`, async (userInfo: Rec
3030
return res.token;
3131
});
3232

33-
// getUserInfo
34-
export const getUserInfo = createAsyncThunk(`${namespace}/getUserInfo`, async () => {
33+
// login
34+
export const status = createAsyncThunk(`${namespace}/status`, async (data: any) => {
35+
const res = await remoteStatus(data);
36+
return res;
37+
});
38+
39+
// info
40+
export const info = createAsyncThunk(`${namespace}/getInfo`, async () => {
3541
const res = await remoteUserInfo();
3642
return res;
3743
});
@@ -107,15 +113,15 @@ const userSlice = createSlice({
107113

108114
state.token = action.payload;
109115
})
110-
.addCase(getUserInfo.pending, (state) => {
116+
.addCase(info.pending, (state) => {
111117
state.error = false;
112118
})
113-
.addCase(getUserInfo.fulfilled, (state, action) => {
119+
.addCase(info.fulfilled, (state, action) => {
114120
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
115121
// @ts-ignore
116122
state.userInfo = { ...action.payload };
117123
})
118-
.addCase(getUserInfo.rejected, (state) => {
124+
.addCase(info.rejected, (state) => {
119125
state.error = true;
120126
localStorage.removeItem(TOKEN_NAME);
121127
});

‎src/pages/Login/components/Login/index.tsx‎

Lines changed: 90 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
import React, { useState, useRef } from 'react';
22
import { useNavigate } from 'react-router-dom';
3-
import { Form, MessagePlugin, Input, Checkbox, Button, FormInstanceFunctions, SubmitContext } from 'tdesign-react';
4-
import { LockOnIcon, UserIcon, BrowseOffIcon, BrowseIcon, RefreshIcon } from 'tdesign-icons-react';
3+
import { Form, MessagePlugin, Input, Image, Button, FormInstanceFunctions, SubmitContext } from 'tdesign-react';
4+
import {
5+
LockOnIcon,
6+
UserIcon,
7+
BrowseOffIcon,
8+
BrowseIcon,
9+
RefreshIcon,
10+
SecuredIcon,
11+
ImageErrorIcon,
12+
} from 'tdesign-icons-react';
513
import classnames from 'classnames';
614
import QRCode from 'qrcode.react';
715
import { useAppDispatch } from 'modules/store';
8-
import { login } from 'modules/user';
16+
import { login, status } from 'modules/user';
917
import useCountdown from '../../hooks/useCountDown';
1018

1119
import Style from './index.module.less';
20+
import { refreshCaptcha } from '../../../../modules/system/user';
1221

1322
const { FormItem } = Form;
1423

@@ -17,6 +26,11 @@ export type ELoginType = 'password' | 'phone' | 'qrcode';
1726
export default function Login() {
1827
const [loginType, changeLoginType] = useState<ELoginType>('password');
1928
const [showPsw, toggleShowPsw] = useState(false);
29+
const [disableLogin, toggleDisableLogin] = useState(false);
30+
const [showCaptcha, toggleShowCaptcha] = useState(false);
31+
const [captchaId, setCaptchaId] = useState('');
32+
const [captchaImg, setCaptchaImg] = useState('');
33+
const [refreshCaptchaCount, setRefreshCaptchaCount] = useState(0);
2034
const { countdown, setupCountdown } = useCountdown(60);
2135
const formRef = useRef<FormInstanceFunctions>();
2236
const navigate = useNavigate();
@@ -26,7 +40,12 @@ export default function Login() {
2640
if (e.validateResult === true) {
2741
try {
2842
const formValue = formRef.current?.getFieldsValue?.(true) || {};
29-
const res: any = await dispatch(login(formValue));
43+
const res: any = await dispatch(
44+
login({
45+
...formValue,
46+
captchaId,
47+
}),
48+
);
3049
if (res.error?.message) {
3150
throw new Error(res.error?.message);
3251
}
@@ -36,10 +55,54 @@ export default function Login() {
3655
navigate('/');
3756
} catch (e: any) {
3857
MessagePlugin.error(e.message);
58+
await getUserStatus();
59+
} finally {
3960
}
4061
}
4162
};
4263

64+
const getUserStatus = async () => {
65+
try {
66+
const formValue = formRef.current?.getFieldsValue?.(true) || {};
67+
const res: any = await dispatch(status({ username: formValue.username }));
68+
if (res.error?.message) {
69+
return;
70+
}
71+
const data = res.payload;
72+
if (data.captcha) {
73+
if (data.captcha.id !== '') {
74+
toggleShowCaptcha(true);
75+
} else {
76+
toggleShowCaptcha(false);
77+
}
78+
setCaptchaId(data.captcha.id);
79+
setCaptchaImg(data.captcha.img);
80+
} else {
81+
toggleShowCaptcha(false);
82+
}
83+
if (data.locked) {
84+
toggleDisableLogin(true);
85+
} else {
86+
toggleDisableLogin(false);
87+
}
88+
} finally {
89+
}
90+
};
91+
92+
async function doRefreshCaptcha() {
93+
try {
94+
const res: any = await dispatch(refreshCaptcha());
95+
if (res.error?.message) {
96+
throw new Error(res.error?.message);
97+
}
98+
setCaptchaId(res.payload?.captcha?.id);
99+
setCaptchaImg(res.payload?.captcha?.img);
100+
setRefreshCaptchaCount(refreshCaptchaCount + 1);
101+
} catch (e: any) {
102+
MessagePlugin.error(e.message);
103+
}
104+
}
105+
43106
// const switchType = (val: ELoginType) => {
44107
// formRef.current?.reset?.();
45108
// changeLoginType(val);
@@ -60,7 +123,7 @@ export default function Login() {
60123
initialData='super'
61124
rules={[{ required: true, message: '账号必填', type: 'error' }]}
62125
>
63-
<Input size='large' placeholder='请输入用户名' prefixIcon={<UserIcon />} />
126+
<Input size='large' placeholder='请输入用户名' onBlur={getUserStatus} prefixIcon={<UserIcon />} />
64127
</FormItem>
65128
<FormItem
66129
name='password'
@@ -82,10 +145,20 @@ export default function Login() {
82145
}
83146
/>
84147
</FormItem>
85-
<div className={classnames(Style.checkContainer, Style.rememberPwd)}>
86-
<Checkbox>记住账号</Checkbox>
87-
<span className={Style.checkContainerTip}>忘记账号？</span>
88-
</div>
148+
{showCaptcha && !disableLogin && (
149+
<FormItem name='captchaAnswer'>
150+
<Input prefixIcon={<SecuredIcon />} placeholder='请输入验证码' clearable />
151+
<span onClick={doRefreshCaptcha}>
152+
<Image
153+
key={refreshCaptchaCount}
154+
src={captchaImg}
155+
style={{ width: '64px', height: '32px', background: '#eee' }}
156+
loading={<ImageErrorIcon style={{ width: '100%', height: '100%', background: '#999' }} />}
157+
error={<ImageErrorIcon style={{ width: '100%', height: '100%', background: '#999' }} />}
158+
/>
159+
</span>
160+
</FormItem>
161+
)}
89162
</>
90163
)}
91164

@@ -120,13 +193,20 @@ export default function Login() {
120193
</FormItem>
121194
</>
122195
)}
123-
{loginType !== 'qrcode' && (
196+
{loginType !== 'qrcode' && !disableLogin && (
124197
<FormItem className={Style.btnContainer}>
125198
<Button block size='large' type='submit'>
126199
登录
127200
</Button>
128201
</FormItem>
129202
)}
203+
{loginType !== 'qrcode' && disableLogin && (
204+
<FormItem className={Style.btnContainer}>
205+
<Button block size='large' type='submit' theme='default' disabled>
206+
账户已锁定, 请过会儿再试
207+
</Button>
208+
</FormItem>
209+
)}
130210
{/* <div className={Style.switchContainer}> */}
131211
{/* {loginType !== 'password' && ( */}
132212
{/* <span className='tip' onClick={() => switchType('password')}> */}

‎src/pages/Login/index.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,10 @@ export default memo(() => {
2525
<div className={Style.titleContainer}>
2626
<h1 className={Style.title}>登录到</h1>
2727
<h1 className={Style.title}>TDesign Starter</h1>
28-
<div className={Style.subTitle}>
29-
<p className={classNames(Style.tip, Style.registerTip)}>
30-
{type === 'register' ? '已有账号?' : '没有账号吗?'}
31-
</p>
32-
<p className={classNames(Style.tip, Style.loginTip)} onClick={handleSwitchLoginType}>
33-
{type === 'register' ? '登录' : '注册新账号'}
34-
</p>
35-
</div>
3628
</div>
3729
{type === 'login' ? <Login /> : <Register />}
3830
</div>
39-
<footer className={Style.copyright}>Copyright @ 2021-2022 Tencent. All Rights Reserved</footer>
31+
<footer className={Style.copyright}>Copyright @ 2024 Go Cinch. All Rights Reserved</footer>
4032
</div>
4133
);
4234
});

‎src/pages/System/User/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import CommonStyle from '../../../styles/common.module.less';
2626
import { create, deleteByIds, find, refreshCaptcha, reset, selectSystemUser, update } from 'modules/system/user';
2727
import { find as findRole } from 'modules/system/role';
2828
import { find as findAction } from 'modules/system/action';
29-
import { BOOL, PAGE } from '../../../constants';
29+
import { PAGE } from '../../../constants';
3030
import Permission from 'components/Permission';
3131

3232
const { FormItem } = Form;

0 commit comments

Comments
 (0)