Merge branch '20220815-登录过程中用户信息错误导致登录失败的业务处理' into 'release_20220923'

9.23 登录过程中用户信息错误导致登录失败的业务处理

See merge request eshop/fe_service_ebtp_frontend!2
This commit is contained in:
jl-zhoujl2
2022-09-23 07:54:21 +00:00
7 changed files with 85 additions and 59 deletions

View File

@ -1,12 +1,14 @@
import { logoutTokenApi } from '@/services/login';
import { getURLInformation, isNotEmpty } from '@/utils/CommonUtils'; import { getURLInformation, isNotEmpty } from '@/utils/CommonUtils';
import { getSessionRoleData } from '@/utils/session'; import { getSessionRoleData } from '@/utils/session';
import { Result, Typography } from 'antd'; import { Button, Result, Typography } from 'antd';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { history } from 'umi'; import { history } from 'umi';
const message = { const messageMap = {
401: '您的用户信息有误,请联系管理员', 401: '您的用户信息有误,请联系管理员',
402: '您的用户角色信息缺失,请联系管理员', 402: '您的用户角色信息缺失,请联系管理员',
403: '您的用户角色信息异常,请重新登录',
90401: '您的登录已超时,请重新登录', 90401: '您的登录已超时,请重新登录',
404: '系统错误,请联系管理员', 404: '系统错误,请联系管理员',
}; };
@ -16,6 +18,7 @@ const RequestTimeoutPage: React.FC<{}> = () => {
const { Text } = Typography; const { Text } = Typography;
const [time, setTime] = useState<number>(10); const [time, setTime] = useState<number>(10);
const roleData = getSessionRoleData(); const roleData = getSessionRoleData();
const token = sessionStorage.getItem('Authorization');
useEffect(() => { useEffect(() => {
let timeInteval: any let timeInteval: any
@ -44,11 +47,18 @@ const RequestTimeoutPage: React.FC<{}> = () => {
}) })
} }
} }
const redirectLogin = () => {
logoutTokenApi({ mall3_token: token }).then(res => {
history.replace({
pathname: '/userformal/login',
})
})
}
return ( return (
<Result <Result
title={message[code]} title={messageMap[code]}
extra={isNotEmpty(roleData) && code == 402 && <Text type="secondary" strong>{time}</Text>} extra={isNotEmpty(roleData) && code == 402 ? <Text type="secondary" strong>{time}</Text> : code == 403 ? <Button type="primary" onClick={() => redirectLogin()}></Button> : null}
/> />
); );
}; };

View File

@ -38,10 +38,16 @@ const Loading: React.FC<{}> = () => {
await cooperReloadToken('', headers) await cooperReloadToken('', headers)
await getUserData(token, url, extra, 1) await getUserData(token, url, extra, 1)
} else if (userType == '2') {//专家 } else if (userType == '2') {//专家
await refreshTokenApi(params, header).then(async res => { // await refreshTokenApi(params, header).then(async res => {
if (res?.success == true) { // if (res?.success == true) {
sessionStorage.setItem('Authorization', res?.data?.value); // sessionStorage.setItem('Authorization', res?.data?.value);
await getUserData(token, url, extra, 1) // await getUserData(token, url, extra, 1)
// }
// })
history.replace({
pathname: '/401',
query: {
code: '403',
} }
}) })
} }

View File

@ -37,7 +37,7 @@ const Login: React.FC<LoginProps> = (props) => {
const [imgUrl, setImgUrl] = useState<any>(''); const [imgUrl, setImgUrl] = useState<any>('');
const [tmpToken, setTmpToken] = useState<any>(''); const [tmpToken, setTmpToken] = useState<any>('');
const remainingTime = 3 //刷新token的剩余时间单位小时 const remainingTime = 3 //刷新token的剩余时间单位小时
const genRandomString = (len: number) => { const genRandomString = (len: number) => {
const text = 'abcdefghijklmnopqrstuvwxyz0123456789'; const text = 'abcdefghijklmnopqrstuvwxyz0123456789';
const rdmIndex = (text: string | any[]) => (Math.random() * text.length) | 0; const rdmIndex = (text: string | any[]) => (Math.random() * text.length) | 0;
@ -56,7 +56,7 @@ const Login: React.FC<LoginProps> = (props) => {
sessionStorage.clear(); sessionStorage.clear();
changeCaptcha(); changeCaptcha();
}, []); }, []);
//登录刷新Token方法 //登录刷新Token方法
const refreshToken = async (data: any) => { const refreshToken = async (data: any) => {
const params = { const params = {
@ -68,10 +68,10 @@ const Login: React.FC<LoginProps> = (props) => {
const header = { const header = {
clientId: REACT_APP_CLIENT_KEY, clientId: REACT_APP_CLIENT_KEY,
} }
await refreshTokenApi(params,header).then(res => { await refreshTokenApi(params, header).then(res => {
if(res?.success == true) { if (res?.success == true) {
sessionStorage.setItem('Authorization', res?.data?.value); sessionStorage.setItem('Authorization', res?.data?.value);
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value); // sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
sessionStorage.setItem('scope', res?.data?.scope); sessionStorage.setItem('scope', res?.data?.scope);
history.push('/redirect'); history.push('/redirect');
} }
@ -79,21 +79,21 @@ const Login: React.FC<LoginProps> = (props) => {
} }
const handleSubmit = async (values: any) => { const handleSubmit = async (values: any) => {
if(START_ENV == 'sim' || START_ENV == 'PROD'){ if (START_ENV == 'sim' || START_ENV == 'PROD') {
let code = { let code = {
code: values.userCode code: values.userCode
} }
await getPassword ({...code}).then((res: any) => { await getPassword({ ...code }).then((res: any) => {
if (res?.data) { if (res?.data) {
disSet(true); disSet(true);
CloudfakeAccountLogin({ ...values, tmpToken }).then((res) => { CloudfakeAccountLogin({ ...values, tmpToken }).then((res) => {
if (res?.success) { if (res?.success) {
if(moment(res?.data?.expiration).diff(moment(),'hours') < remainingTime) { if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
refreshToken(res?.data) refreshToken(res?.data)
} else { } else {
sessionStorage.setItem('Authorization', res?.data?.value); sessionStorage.setItem('Authorization', res?.data?.value);
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value); // sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
sessionStorage.setItem('scope', res?.data?.scope); sessionStorage.setItem('scope', res?.data?.scope);
history.push('/redirect'); history.push('/redirect');
} }
@ -101,7 +101,7 @@ const Login: React.FC<LoginProps> = (props) => {
changeCaptcha() changeCaptcha()
disSet(false); disSet(false);
}); });
} else { } else {
message.error('口令不正确,请重新输入') message.error('口令不正确,请重新输入')
} }
@ -110,11 +110,11 @@ const Login: React.FC<LoginProps> = (props) => {
disSet(true); disSet(true);
await CloudfakeAccountLogin({ ...values, tmpToken }).then((res) => { await CloudfakeAccountLogin({ ...values, tmpToken }).then((res) => {
if (res?.success) { if (res?.success) {
if(moment(res?.data?.expiration).diff(moment(),'hours') < remainingTime) { if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
refreshToken(res?.data) refreshToken(res?.data)
} else { } else {
sessionStorage.setItem('Authorization', res?.data?.value); sessionStorage.setItem('Authorization', res?.data?.value);
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value); // sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
sessionStorage.setItem('scope', res?.data?.scope); sessionStorage.setItem('scope', res?.data?.scope);
history.push('/redirect'); history.push('/redirect');
} }
@ -137,14 +137,14 @@ const Login: React.FC<LoginProps> = (props) => {
<LoginMessage content="账号或密码错误" /> <LoginMessage content="账号或密码错误" />
)} )}
{ {
START_ENV == 'sim' || START_ENV == 'PROD' ? START_ENV == 'sim' || START_ENV == 'PROD' ?
<Row> <Row>
<Col span={24}> <Col span={24}>
<Form.Item name="userCode" rules={[{ required: true, message: '请输入口令' }]}> <Form.Item name="userCode" rules={[{ required: true, message: '请输入口令' }]}>
<Input size='large' placeholder="请输入口令" /> <Input size='large' placeholder="请输入口令" />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> : null </Row> : null
} }
<UserName <UserName
name="userName" name="userName"
@ -172,8 +172,8 @@ const Login: React.FC<LoginProps> = (props) => {
<Input size='large' placeholder="验证码" /> <Input size='large' placeholder="验证码" />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12} style={{lineHeight: '33.11px'}}> <Col span={12} style={{ lineHeight: '33.11px' }}>
<Image src={imgUrl} preview={false} onClick={() => changeCaptcha()}/> <Image src={imgUrl} preview={false} onClick={() => changeCaptcha()} />
</Col> </Col>
</Row> </Row>
</Tab> </Tab>

View File

@ -71,7 +71,7 @@ const Login: React.FC<LoginProps> = (props) => {
await refreshTokenApi(params, header).then(res => { await refreshTokenApi(params, header).then(res => {
if (res?.success == true) { if (res?.success == true) {
sessionStorage.setItem('Authorization', res?.data?.value); sessionStorage.setItem('Authorization', res?.data?.value);
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value); // sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
sessionStorage.setItem('scope', res?.data?.scope); sessionStorage.setItem('scope', res?.data?.scope);
history.push('/redirect'); history.push('/redirect');
} }
@ -93,7 +93,7 @@ const Login: React.FC<LoginProps> = (props) => {
refreshToken(res?.data) refreshToken(res?.data)
} else { } else {
sessionStorage.setItem('Authorization', res?.data?.value); sessionStorage.setItem('Authorization', res?.data?.value);
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value); // sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
sessionStorage.setItem('scope', res?.data?.scope); sessionStorage.setItem('scope', res?.data?.scope);
history.push('/redirect'); history.push('/redirect');
} }
@ -115,7 +115,7 @@ const Login: React.FC<LoginProps> = (props) => {
refreshToken(res?.data) refreshToken(res?.data)
} else { } else {
sessionStorage.setItem('Authorization', res?.data?.value); sessionStorage.setItem('Authorization', res?.data?.value);
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value); // sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
sessionStorage.setItem('scope', res?.data?.scope); sessionStorage.setItem('scope', res?.data?.scope);
history.push('/redirect'); history.push('/redirect');
} }

View File

@ -68,10 +68,10 @@ const Login: React.FC<LoginProps> = (props) => {
const header = { const header = {
clientId: REACT_APP_CLIENT_KEY, clientId: REACT_APP_CLIENT_KEY,
} }
await refreshTokenApi(params,header).then(res => { await refreshTokenApi(params, header).then(res => {
if(res?.success == true) { if (res?.success == true) {
sessionStorage.setItem('Authorization', res?.data?.value); sessionStorage.setItem('Authorization', res?.data?.value);
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value); // sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
sessionStorage.setItem('scope', res?.data?.scope); sessionStorage.setItem('scope', res?.data?.scope);
history.push('/redirect'); history.push('/redirect');
} }
@ -79,21 +79,21 @@ const Login: React.FC<LoginProps> = (props) => {
} }
const handleSubmit = async (values: any) => { const handleSubmit = async (values: any) => {
if(START_ENV == 'sim' || START_ENV == 'PROD'){ if (START_ENV == 'sim' || START_ENV == 'PROD') {
let code = { let code = {
code: values.userCode code: values.userCode
} }
await getPassword ({...code}).then((res) => { await getPassword({ ...code }).then((res) => {
if (res?.data) { if (res?.data) {
disSet(true); disSet(true);
ZjfakeAccountLogin({ ...values, tmpToken }).then((res) => { ZjfakeAccountLogin({ ...values, tmpToken }).then((res) => {
if (res?.success) { if (res?.success) {
if(moment(res?.data?.expiration).diff(moment(),'hours') < remainingTime) { if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
refreshToken(res?.data) refreshToken(res?.data)
} else { } else {
sessionStorage.setItem('Authorization', res?.data?.value); sessionStorage.setItem('Authorization', res?.data?.value);
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value); // sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
sessionStorage.setItem('scope', res?.data?.scope); sessionStorage.setItem('scope', res?.data?.scope);
history.push('/redirect'); history.push('/redirect');
} }
@ -101,7 +101,7 @@ const Login: React.FC<LoginProps> = (props) => {
changeCaptcha(); changeCaptcha();
disSet(false); disSet(false);
}); });
} else { } else {
message.error('口令不正确,请重新输入') message.error('口令不正确,请重新输入')
} }
@ -110,11 +110,11 @@ const Login: React.FC<LoginProps> = (props) => {
disSet(true); disSet(true);
await ZjfakeAccountLogin({ ...values, tmpToken }).then((res) => { await ZjfakeAccountLogin({ ...values, tmpToken }).then((res) => {
if (res?.success) { if (res?.success) {
if(moment(res?.data?.expiration).diff(moment(),'hours') < remainingTime) { if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
refreshToken(res?.data) refreshToken(res?.data)
} else { } else {
sessionStorage.setItem('Authorization', res?.data?.value); sessionStorage.setItem('Authorization', res?.data?.value);
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value); // sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
sessionStorage.setItem('scope', res?.data?.scope); sessionStorage.setItem('scope', res?.data?.scope);
history.push('/redirect'); history.push('/redirect');
} }
@ -141,14 +141,14 @@ const Login: React.FC<LoginProps> = (props) => {
<LoginMessage content="账号或密码错误" /> <LoginMessage content="账号或密码错误" />
)} )}
{ {
START_ENV == 'sim' || START_ENV == 'PROD' ? START_ENV == 'sim' || START_ENV == 'PROD' ?
<Row> <Row>
<Col span={24}> <Col span={24}>
<Form.Item name="userCode" rules={[{ required: true, message: '请输入口令' }]}> <Form.Item name="userCode" rules={[{ required: true, message: '请输入口令' }]}>
<Input size='large' placeholder="请输入口令" /> <Input size='large' placeholder="请输入口令" />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> : null </Row> : null
} }
<UserName <UserName
name="userName" name="userName"
@ -177,8 +177,8 @@ const Login: React.FC<LoginProps> = (props) => {
<Input size='large' placeholder="验证码" /> <Input size='large' placeholder="验证码" />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12} style={{lineHeight: '33.11px'}}> <Col span={12} style={{ lineHeight: '33.11px' }}>
<Image src={imgUrl} preview={false} onClick={() => changeCaptcha()}/> <Image src={imgUrl} preview={false} onClick={() => changeCaptcha()} />
</Col> </Col>
</Row> </Row>
<Submit loading={submitting} disabled={dis}> <Submit loading={submitting} disabled={dis}>

View File

@ -51,7 +51,7 @@ const Index: React.FC<{}> = () => {
await refreshTokenApi(params, header).then(res => { await refreshTokenApi(params, header).then(res => {
if (res?.success == true) { if (res?.success == true) {
sessionStorage.setItem('Authorization', res?.data?.value); sessionStorage.setItem('Authorization', res?.data?.value);
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value); // sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
sessionStorage.setItem('scope', res?.data?.scope); sessionStorage.setItem('scope', res?.data?.scope);
history.push('/redirect'); history.push('/redirect');
} }
@ -65,7 +65,7 @@ const Index: React.FC<{}> = () => {
refreshToken(res?.data) refreshToken(res?.data)
} else { } else {
sessionStorage.setItem('Authorization', res?.data?.value); sessionStorage.setItem('Authorization', res?.data?.value);
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value); // sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
sessionStorage.setItem('scope', res?.data?.scope); sessionStorage.setItem('scope', res?.data?.scope);
history.push('/redirect'); history.push('/redirect');
} }
@ -180,7 +180,7 @@ const Index: React.FC<{}> = () => {
<Form.Item> <Form.Item>
<Button type="primary" className="w100" htmlType="submit"> <Button type="primary" className="w100" htmlType="submit">
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>

View File

@ -107,4 +107,14 @@ export async function getFakeCaptcha(params: any) {
}); });
} }
/**
* 用户登出
* @param params
* @returns
*/
export async function logoutTokenApi(params: any) {
return request('/api/auth/logout', {
method: 'GET',
params: params
});
}