liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch '20220815-登录过程中用户信息错误导致登录失败的业务处理' of http://10.124.128.2:8888/eshop/fe_service_ebtp_frontend into uat-export-face-recog

Browse Source
This commit is contained in:
jl-zhoujl2
2022-09-07 17:29:09 +08:00
parent e0333ac75b 3fe854ff86
commit 393af37221
7 changed files with 186 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/401.tsx
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}
/> />
); );
}; };

14
src/pages/LoadingPage/index.tsx
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',
} }
}) })
} }

46
src/pages/usercloud/login/index.tsx
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>

6
src/pages/usercooper/login/index.tsx
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');
} }

42
src/pages/userexpert/login/index.tsx
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}>

208
src/pages/userformal/login/index.tsx
View File

@ -32,7 +32,7 @@ const Index: React.FC<{}> = () => {
const [spinning, setSping] = useState<boolean>(false);//加载遮罩 const [spinning, setSping] = useState<boolean>(false);//加载遮罩
const video = useRef(); const video = useRef();
const whetherIE = useRef<boolean>(false); const whetherIE = useRef<boolean>(false);
const mediaStreamTrack = useRef<any>(); const mediaStreamTrack = useRef<any>();
const { TabPane } = Tabs; const { TabPane } = Tabs;
const [submitLoading, setSubmitLoading] = useState<boolean>(false); const [submitLoading, setSubmitLoading] = useState<boolean>(false);
const [faceLoginDisable, setFaceLoginDisable] = useState<boolean>(false); const [faceLoginDisable, setFaceLoginDisable] = useState<boolean>(false);
@ -65,7 +65,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');
} }
@ -79,7 +79,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');
} }
@ -89,32 +89,32 @@ const Index: React.FC<{}> = () => {
}; };
const onChange = (key: string) => { const onChange = (key: string) => {
if(key == '2'){ if (key == '2') {
BrowserType(); BrowserType();
InitMedia(); InitMedia();
}else{ } else {
if(allowedToFaceLogin()){ if (allowedToFaceLogin()) {
if(whetherIE.current){ if (whetherIE.current) {
releaseCamera('faceLoginFrame'); releaseCamera('faceLoginFrame');
}else{ } else {
mediaStreamTrack.current?.stop(); mediaStreamTrack.current?.stop();
} }
} }
} }
}; };
const releaseCamera = (id:string) => { const releaseCamera = (id: string) => {
const childFrameObj = document.getElementById(id); const childFrameObj = document.getElementById(id);
childFrameObj?.contentWindow?.postMessage('releaseCamera', '*'); childFrameObj?.contentWindow?.postMessage('releaseCamera', '*');
} }
const hanleFaceSubmit = async (multipartFiles: any, values: any) => { const hanleFaceSubmit = async (multipartFiles: any, values: any) => {
let userName = form2.getFieldValue('userName'); let userName = form2.getFieldValue('userName');
if(whetherIE.current){ if (whetherIE.current) {
if(!multipartFiles){ if (!multipartFiles) {
const childFrameObj = document.getElementById('faceLoginFrame'); const childFrameObj = document.getElementById('faceLoginFrame');
childFrameObj.contentWindow.postMessage('capture', '*'); childFrameObj.contentWindow.postMessage('capture', '*');
}else{ } else {
await ZjfakeFaceLogin({ userName, multipartFiles }).then((res) => { await ZjfakeFaceLogin({ userName, multipartFiles }).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) {
@ -128,41 +128,41 @@ const Index: React.FC<{}> = () => {
} }
} }
}) })
.finally( .finally(
() => {setSubmitLoading(false);} () => { setSubmitLoading(false); }
); );
} }
} }
else{ else {
if(!multipartFiles){ if (!multipartFiles) {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
canvas.setAttribute('width','300'); canvas.setAttribute('width', '300');
canvas.setAttribute('height', '200'); canvas.setAttribute('height', '200');
const context = canvas.getContext('2d'); const context = canvas.getContext('2d');
context.drawImage(video.current, 0, 0, 300, 200); context.drawImage(video.current, 0, 0, 300, 200);
canvas.toBlob(function (result:any) { canvas.toBlob(function (result: any) {
hanleFaceSubmit(result, null); hanleFaceSubmit(result, null);
}) })
}else{ } else {
setSubmitLoading(true); setSubmitLoading(true);
await ZjfakeFaceLogin({ userName, multipartFiles }).then((res) => { await ZjfakeFaceLogin({ userName, multipartFiles }).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 {
mediaStreamTrack.current?.stop(); mediaStreamTrack.current?.stop();
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');
}
} }
}) }
})
.finally( .finally(
() => {setSubmitLoading(false);} () => { setSubmitLoading(false); }
); );
}
} }
}
} }
const handleOk = () => { // 确定修改密码 const handleOk = () => { // 确定修改密码
@ -192,67 +192,67 @@ const Index: React.FC<{}> = () => {
} }
} }
//浏览器类型 //浏览器类型
const BrowserType = () =>{ const BrowserType = () => {
//取得浏览器的userAgent字符串 //取得浏览器的userAgent字符串
var userAgent = navigator.userAgent; var userAgent = navigator.userAgent;
//判断是否IE<11 //判断是否IE<11
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
//判断是否IE的Edge浏览器 //判断是否IE的Edge浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; var isEdge = userAgent.indexOf("Edge") > -1 && !isIE;
//判断是否IE11 //判断是否IE11
var isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1; var isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
if(isIE){ if (isIE) {
var reIE = new RegExp("MSIE(\\d+\\.\\d+);"); var reIE = new RegExp("MSIE(\\d+\\.\\d+);");
reIE.test(userAgent); reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]); var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7){ if (fIEVersion == 7) {
return 7; return 7;
}else if(fIEVersion == 8){ } else if (fIEVersion == 8) {
return 8; return 8;
}else if(fIEVersion == 9){ } else if (fIEVersion == 9) {
return 9; return 9;
}else if(fIEVersion == 10){ } else if (fIEVersion == 10) {
return 10; return 10;
}else{ } else {
//IE版本<=7 //IE版本<=7
return 6; return 6;
}
}else if(isEdge){
return 'edge';
}else if(isIE11){
//IE11
whetherIE.current = true;
return 11;
}else{
//不是IE浏览器
return -1;
} }
} else if (isEdge) {
return 'edge';
} else if (isIE11) {
//IE11
whetherIE.current = true;
return 11;
} else {
//不是IE浏览器
return -1;
}
} }
//初始化video //初始化video
const InitMedia = () => { const InitMedia = () => {
if(!whetherIE.current){ if (!whetherIE.current) {
InitUserMedia({video : {width: 480, height: 320}}, success, error); InitUserMedia({ video: { width: 480, height: 320 } }, success, error);
} }
}; };
//访问用户媒体设备的兼容方法 //访问用户媒体设备的兼容方法
const InitUserMedia = (constraints: any, success: any, error: any) => { const InitUserMedia = (constraints: any, success: any, error: any) => {
if (navigator.mediaDevices.getUserMedia) { if (navigator.mediaDevices.getUserMedia) {
//最新的标准API //最新的标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error); navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) { } else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器 //webkit核心浏览器
navigator.webkitGetUserMedia(constraints,success, error); navigator.webkitGetUserMedia(constraints, success, error);
} else if (navigator.mozGetUserMedia) { } else if (navigator.mozGetUserMedia) {
//firfox浏览器 //firfox浏览器
navigator.mozGetUserMedia(constraints, success, error); navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) { } else if (navigator.getUserMedia) {
//旧版API //旧版API
navigator.getUserMedia(constraints, success, error); navigator.getUserMedia(constraints, success, error);
} }
} }
//调用媒体设备成功回调方法 //调用媒体设备成功回调方法
const success = (stream: any) => { const success = (stream: any) => {
var result = stream.getVideoTracks().some(function(track:any) { var result = stream.getVideoTracks().some(function (track: any) {
return track.enabled && track.readyState === 'live'; return track.enabled && track.readyState === 'live';
}); });
if (result) { if (result) {
@ -267,13 +267,13 @@ const Index: React.FC<{}> = () => {
} }
} }
//调用媒体设备失败回调方法 //调用媒体设备失败回调方法
const error = (error:any) => { const error = (error: any) => {
message.warn('无法获取到摄像头权限，请确认是否存在摄像头及是否授权使用摄像头'); message.warn('无法获取到摄像头权限，请确认是否存在摄像头及是否授权使用摄像头');
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`); console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
} }
//base64转blob //base64转blob
const base64ToBlob = (base64:string) =>{ const base64ToBlob = (base64: string) => {
const parts = base64.split(";base64,"); const parts = base64.split(";base64,");
const contentType = parts[0].split(":")[1]; const contentType = parts[0].split(":")[1];
const raw = window.atob(parts[1]); const raw = window.atob(parts[1]);
@ -286,12 +286,12 @@ const Index: React.FC<{}> = () => {
}; };
//RgbToBase64 //RgbToBase64
const RgbToBase64 = async (image:any) =>{ const RgbToBase64 = async (image: any) => {
setSubmitLoading(true); setSubmitLoading(true);
await rgbToBase64({image}).then(res => { await rgbToBase64({ image }).then(res => {
const _blob = base64ToBlob( 'data:image/jpg;base64,' + res.data); const _blob = base64ToBlob('data:image/jpg;base64,' + res.data);
hanleFaceSubmit(_blob, null); hanleFaceSubmit(_blob, null);
}).catch(e=>{ }).catch(e => {
setSubmitLoading(false); setSubmitLoading(false);
}); });
} }
@ -299,11 +299,11 @@ const Index: React.FC<{}> = () => {
//是https或者是本地 //是https或者是本地
const httpsOrLocal = () => { const httpsOrLocal = () => {
let protocol = document.location.protocol; let protocol = document.location.protocol;
if(protocol == 'https'){ if (protocol == 'https') {
return true; return true;
}else{ } else {
let host = window.location.hostname; let host = window.location.hostname;
if(host == '127.0.0.1' || host == 'localhost'){ if (host == '127.0.0.1' || host == 'localhost') {
return true; return true;
} }
} }
@ -313,19 +313,19 @@ const Index: React.FC<{}> = () => {
//是否允许人脸登录 //是否允许人脸登录
const allowedToFaceLogin = () => { const allowedToFaceLogin = () => {
let browseType = BrowserType() let browseType = BrowserType()
if((browseType == 11 || browseType == -1) && httpsOrLocal()){ if ((browseType == 11 || browseType == -1) && httpsOrLocal()) {
return true; return true;
} }
return false; return false;
} }
useEffect(() => { useEffect(() => {
cookie.remove('mall3_token'); cookie.remove('mall3_token');
sessionStorage.clear(); sessionStorage.clear();
changeCaptcha(); changeCaptcha();
if(!allowedToFaceLogin()){ if (!allowedToFaceLogin()) {
setFaceLoginDisable(true); setFaceLoginDisable(true);
} }
}, []); }, []);
@ -339,7 +339,7 @@ const Index: React.FC<{}> = () => {
</div> </div>
<div className="main"> <div className="main">
<div className="text"> <div className="text">
<Tabs defaultActiveKey="1" onChange={onChange} size = {'large'}> <Tabs defaultActiveKey="1" onChange={onChange} size={'large'}>
<TabPane tab="账号密码登录" key="1"> <TabPane tab="账号密码登录" key="1">
<Form <Form
name="basic" name="basic"
@ -403,11 +403,11 @@ 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>
</TabPane> </TabPane>
<TabPane tab="人脸识别登录" key="2" disabled = {faceLoginDisable}> <TabPane tab="人脸识别登录" key="2" disabled={faceLoginDisable}>
<Form <Form
name="basic2" name="basic2"
className="form-box" className="form-box"
@ -430,12 +430,12 @@ const Index: React.FC<{}> = () => {
</Form.Item> </Form.Item>
{/* 加载摄像头 */} {/* 加载摄像头 */}
<Form.Item> <Form.Item>
{!whetherIE.current ? (<video ref={video} width="382" height="200"></video>):(<FrameFaceLogin faceCompareEvent = {RgbToBase64}/>)} {!whetherIE.current ? (<video ref={video} width="382" height="200"></video>) : (<FrameFaceLogin faceCompareEvent={RgbToBase64} />)}
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
{/* onClick={() => {hanleFaceSubmit(null, null);}} */} {/* onClick={() => {hanleFaceSubmit(null, null);}} */}
<Button type="primary" className="w100" loading = {submitLoading} htmlType="submit"> <Button type="primary" className="w100" loading={submitLoading} htmlType="submit">
{submitLoading?'请稍候，正在验证中...':'登 录'} {submitLoading ? '请稍候，正在验证中...' : '登 录'}
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>

12
src/services/login.ts
View File

@ -125,4 +125,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
});
}