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

2022-09-07 17:29:09 +08:00
parent e0333ac75b 3fe854ff86
commit 393af37221
7 changed files with 186 additions and 160 deletions
--- a/src/pages/401.tsx
+++ b/src/pages/401.tsx
@ -1,12 +1,14 @@
+import { logoutTokenApi } from '@/services/login';
 import { getURLInformation, isNotEmpty } from '@/utils/CommonUtils';
 import { getSessionRoleData } from '@/utils/session';
-import { Result, Typography } from 'antd';
+import { Button, Result, Typography } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { history } from 'umi';

-const message = {
+const messageMap = {
  401: '您的用户信息有误，请联系管理员',
  402: '您的用户角色信息缺失，请联系管理员',
+  403: '您的用户角色信息异常，请重新登录',
  90401: '您的登录已超时，请重新登录',
  404: '系统错误，请联系管理员',
 };
@ -16,6 +18,7 @@ const RequestTimeoutPage: React.FC<{}> = () => {
  const { Text } = Typography;
  const [time, setTime] = useState<number>(10);
  const roleData = getSessionRoleData();
+  const token = sessionStorage.getItem('Authorization');

  useEffect(() => {
    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 (
    <Result
-      title={message[code]}
-      extra={isNotEmpty(roleData) && code == 402 && <Text type="secondary" strong>{time}秒后进入默认角色</Text>}
+      title={messageMap[code]}
+      extra={isNotEmpty(roleData) && code == 402 ? <Text type="secondary" strong>{time}秒后进入默认角色</Text> : code == 403 ? <Button type="primary" onClick={() => redirectLogin()}>重新登录</Button> : null}
    />
  );
 };
--- a/src/pages/LoadingPage/index.tsx
+++ b/src/pages/LoadingPage/index.tsx
@ -38,10 +38,16 @@ const Loading: React.FC<{}> = () => {
      await cooperReloadToken('', headers)
      await getUserData(token, url, extra, 1)
    } else if (userType == '2') {//专家
-      await refreshTokenApi(params, header).then(async res => {
-        if (res?.success == true) {
-          sessionStorage.setItem('Authorization', res?.data?.value);
-          await getUserData(token, url, extra, 1)
+      // await refreshTokenApi(params, header).then(async res => {
+      //   if (res?.success == true) {
+      //     sessionStorage.setItem('Authorization', res?.data?.value);
+      //     await getUserData(token, url, extra, 1)
+      //   }
+      // })
+      history.replace({
+        pathname: '/401',
+        query: {
+          code: '403',
        }
      })
    }
--- a/src/pages/usercloud/login/index.tsx
+++ b/src/pages/usercloud/login/index.tsx
@ -37,7 +37,7 @@ const Login: React.FC<LoginProps> = (props) => {
  const [imgUrl, setImgUrl] = useState<any>('');
  const [tmpToken, setTmpToken] = useState<any>('');
  const remainingTime = 3 //刷新token的剩余时间，单位小时
-  
+
  const genRandomString = (len: number) => {
    const text = 'abcdefghijklmnopqrstuvwxyz0123456789';
    const rdmIndex = (text: string | any[]) => (Math.random() * text.length) | 0;
@ -56,7 +56,7 @@ const Login: React.FC<LoginProps> = (props) => {
    sessionStorage.clear();
    changeCaptcha();
  }, []);
-  
+
  //登录刷新Token方法
  const refreshToken = async (data: any) => {
    const params = {
@ -68,10 +68,10 @@ const Login: React.FC<LoginProps> = (props) => {
    const header = {
      clientId: REACT_APP_CLIENT_KEY,
    }
-    await refreshTokenApi(params,header).then(res => {
-      if(res?.success == true) {
+    await refreshTokenApi(params, header).then(res => {
+      if (res?.success == true) {
        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);
        history.push('/redirect');
      }
@ -79,21 +79,21 @@ const Login: React.FC<LoginProps> = (props) => {
  }

  const handleSubmit = async (values: any) => {
-    if(START_ENV == 'sim' || START_ENV == 'PROD'){
+    if (START_ENV == 'sim' || START_ENV == 'PROD') {
      let code = {
        code: values.userCode
      }
-      await getPassword ({...code}).then((res: any) => {
+      await getPassword({ ...code }).then((res: any) => {
        if (res?.data) {
-  
+
          disSet(true);
          CloudfakeAccountLogin({ ...values, tmpToken }).then((res) => {
            if (res?.success) {
-              if(moment(res?.data?.expiration).diff(moment(),'hours') < remainingTime) {
+              if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
                refreshToken(res?.data)
              } else {
                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);
                history.push('/redirect');
              }
@ -101,7 +101,7 @@ const Login: React.FC<LoginProps> = (props) => {
            changeCaptcha()
            disSet(false);
          });
-          
+
        } else {
          message.error('口令不正确，请重新输入')
        }
@ -110,11 +110,11 @@ const Login: React.FC<LoginProps> = (props) => {
      disSet(true);
      await CloudfakeAccountLogin({ ...values, tmpToken }).then((res) => {
        if (res?.success) {
-          if(moment(res?.data?.expiration).diff(moment(),'hours') < remainingTime) {
+          if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
            refreshToken(res?.data)
          } else {
            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);
            history.push('/redirect');
          }
@ -137,14 +137,14 @@ const Login: React.FC<LoginProps> = (props) => {
            <LoginMessage content="账号或密码错误" />
          )}
          {
-            START_ENV == 'sim' || START_ENV == 'PROD' ?  
-            <Row>
-              <Col span={24}>
-                <Form.Item name="userCode" rules={[{ required: true, message: '请输入口令' }]}>
-                  <Input size='large' placeholder="请输入口令" />
-                </Form.Item>
-              </Col>
-            </Row> : null
+            START_ENV == 'sim' || START_ENV == 'PROD' ?
+              <Row>
+                <Col span={24}>
+                  <Form.Item name="userCode" rules={[{ required: true, message: '请输入口令' }]}>
+                    <Input size='large' placeholder="请输入口令" />
+                  </Form.Item>
+                </Col>
+              </Row> : null
          }
          <UserName
            name="userName"
@ -172,8 +172,8 @@ const Login: React.FC<LoginProps> = (props) => {
                <Input size='large' placeholder="验证码" />
              </Form.Item>
            </Col>
-            <Col span={12} style={{lineHeight: '33.11px'}}>
-              <Image src={imgUrl} preview={false} onClick={() => changeCaptcha()}/>
+            <Col span={12} style={{ lineHeight: '33.11px' }}>
+              <Image src={imgUrl} preview={false} onClick={() => changeCaptcha()} />
            </Col>
          </Row>
        </Tab>
--- a/src/pages/usercooper/login/index.tsx
+++ b/src/pages/usercooper/login/index.tsx
@ -71,7 +71,7 @@ const Login: React.FC<LoginProps> = (props) => {
    await refreshTokenApi(params, header).then(res => {
      if (res?.success == true) {
        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);
        history.push('/redirect');
      }
@ -93,7 +93,7 @@ const Login: React.FC<LoginProps> = (props) => {
                refreshToken(res?.data)
              } else {
                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);
                history.push('/redirect');
              }
@ -115,7 +115,7 @@ const Login: React.FC<LoginProps> = (props) => {
            refreshToken(res?.data)
          } else {
            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);
            history.push('/redirect');
          }
--- a/src/pages/userexpert/login/index.tsx
+++ b/src/pages/userexpert/login/index.tsx
@ -68,10 +68,10 @@ const Login: React.FC<LoginProps> = (props) => {
    const header = {
      clientId: REACT_APP_CLIENT_KEY,
    }
-    await refreshTokenApi(params,header).then(res => {
-      if(res?.success == true) {
+    await refreshTokenApi(params, header).then(res => {
+      if (res?.success == true) {
        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);
        history.push('/redirect');
      }
@ -79,21 +79,21 @@ const Login: React.FC<LoginProps> = (props) => {
  }

  const handleSubmit = async (values: any) => {
-    if(START_ENV == 'sim' || START_ENV == 'PROD'){
+    if (START_ENV == 'sim' || START_ENV == 'PROD') {
      let code = {
        code: values.userCode
      }
-      await getPassword ({...code}).then((res) => {
+      await getPassword({ ...code }).then((res) => {
        if (res?.data) {
-  
+
          disSet(true);
          ZjfakeAccountLogin({ ...values, tmpToken }).then((res) => {
            if (res?.success) {
-              if(moment(res?.data?.expiration).diff(moment(),'hours') < remainingTime) {
+              if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
                refreshToken(res?.data)
              } else {
                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);
                history.push('/redirect');
              }
@ -101,7 +101,7 @@ const Login: React.FC<LoginProps> = (props) => {
            changeCaptcha();
            disSet(false);
          });
-          
+
        } else {
          message.error('口令不正确，请重新输入')
        }
@ -110,11 +110,11 @@ const Login: React.FC<LoginProps> = (props) => {
      disSet(true);
      await ZjfakeAccountLogin({ ...values, tmpToken }).then((res) => {
        if (res?.success) {
-          if(moment(res?.data?.expiration).diff(moment(),'hours') < remainingTime) {
+          if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
            refreshToken(res?.data)
          } else {
            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);
            history.push('/redirect');
          }
@ -141,14 +141,14 @@ const Login: React.FC<LoginProps> = (props) => {
            <LoginMessage content="账号或密码错误" />
          )}
          {
-            START_ENV == 'sim' || START_ENV == 'PROD' ?  
-            <Row>
-              <Col span={24}>
-                <Form.Item name="userCode" rules={[{ required: true, message: '请输入口令' }]}>
-                  <Input size='large' placeholder="请输入口令" />
-                </Form.Item>
-              </Col>
-            </Row> : null
+            START_ENV == 'sim' || START_ENV == 'PROD' ?
+              <Row>
+                <Col span={24}>
+                  <Form.Item name="userCode" rules={[{ required: true, message: '请输入口令' }]}>
+                    <Input size='large' placeholder="请输入口令" />
+                  </Form.Item>
+                </Col>
+              </Row> : null
          }
          <UserName
            name="userName"
@ -177,8 +177,8 @@ const Login: React.FC<LoginProps> = (props) => {
              <Input size='large' placeholder="验证码" />
            </Form.Item>
          </Col>
-          <Col span={12} style={{lineHeight: '33.11px'}}>
-            <Image src={imgUrl} preview={false} onClick={() => changeCaptcha()}/>
+          <Col span={12} style={{ lineHeight: '33.11px' }}>
+            <Image src={imgUrl} preview={false} onClick={() => changeCaptcha()} />
          </Col>
        </Row>
        <Submit loading={submitting} disabled={dis}>
--- a/src/pages/userformal/login/index.tsx
+++ b/src/pages/userformal/login/index.tsx
@ -32,7 +32,7 @@ const Index: React.FC<{}> = () => {
  const [spinning, setSping] = useState<boolean>(false);//加载遮罩
  const video = useRef();
  const whetherIE = useRef<boolean>(false);
-  const mediaStreamTrack  = useRef<any>();
+  const mediaStreamTrack = useRef<any>();
  const { TabPane } = Tabs;
  const [submitLoading, setSubmitLoading] = useState<boolean>(false);
  const [faceLoginDisable, setFaceLoginDisable] = useState<boolean>(false);
@ -65,7 +65,7 @@ const Index: React.FC<{}> = () => {
    await refreshTokenApi(params, header).then(res => {
      if (res?.success == true) {
        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);
        history.push('/redirect');
      }
@ -79,7 +79,7 @@ const Index: React.FC<{}> = () => {
          refreshToken(res?.data)
        } else {
          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);
          history.push('/redirect');
        }
@ -89,32 +89,32 @@ const Index: React.FC<{}> = () => {
  };

  const onChange = (key: string) => {
-    if(key == '2'){
+    if (key == '2') {
      BrowserType();
      InitMedia();
-    }else{
-      if(allowedToFaceLogin()){
-        if(whetherIE.current){
+    } else {
+      if (allowedToFaceLogin()) {
+        if (whetherIE.current) {
          releaseCamera('faceLoginFrame');
-        }else{
+        } else {
          mediaStreamTrack.current?.stop();
        }
      }
    }
  };

-  const releaseCamera = (id:string) => {
+  const releaseCamera = (id: string) => {
    const childFrameObj = document.getElementById(id);
-    childFrameObj?.contentWindow?.postMessage('releaseCamera', '*');  
+    childFrameObj?.contentWindow?.postMessage('releaseCamera', '*');
  }

  const hanleFaceSubmit = async (multipartFiles: any, values: any) => {
    let userName = form2.getFieldValue('userName');
-    if(whetherIE.current){
-      if(!multipartFiles){
+    if (whetherIE.current) {
+      if (!multipartFiles) {
        const childFrameObj = document.getElementById('faceLoginFrame');
-        childFrameObj.contentWindow.postMessage('capture', '*');  
-      }else{
+        childFrameObj.contentWindow.postMessage('capture', '*');
+      } else {
        await ZjfakeFaceLogin({ userName, multipartFiles }).then((res) => {
          if (res?.success) {
            if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
@ -128,41 +128,41 @@ const Index: React.FC<{}> = () => {
            }
          }
        })
-        .finally(
-          () => {setSubmitLoading(false);}
-        );
+          .finally(
+            () => { setSubmitLoading(false); }
+          );
      }
    }
-    else{
-      if(!multipartFiles){
+    else {
+      if (!multipartFiles) {
        const canvas = document.createElement('canvas');
-        canvas.setAttribute('width','300');
+        canvas.setAttribute('width', '300');
        canvas.setAttribute('height', '200');
        const context = canvas.getContext('2d');
        context.drawImage(video.current, 0, 0, 300, 200);
-        canvas.toBlob(function (result:any) {
+        canvas.toBlob(function (result: any) {
          hanleFaceSubmit(result, null);
        })
-      }else{
-          setSubmitLoading(true);
-          await ZjfakeFaceLogin({ userName, multipartFiles }).then((res) => {
-            if (res?.success) {
-              if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
-                refreshToken(res?.data)
-              } else {
-                mediaStreamTrack.current?.stop();
-                sessionStorage.setItem('Authorization', res?.data?.value);
-                sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
-                sessionStorage.setItem('scope', res?.data?.scope);
-                history.push('/redirect');
-              }
+      } else {
+        setSubmitLoading(true);
+        await ZjfakeFaceLogin({ userName, multipartFiles }).then((res) => {
+          if (res?.success) {
+            if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
+              refreshToken(res?.data)
+            } else {
+              mediaStreamTrack.current?.stop();
+              sessionStorage.setItem('Authorization', res?.data?.value);
+              sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
+              sessionStorage.setItem('scope', res?.data?.scope);
+              history.push('/redirect');
            }
-          })
+          }
+        })
          .finally(
-            () => {setSubmitLoading(false);}
+            () => { setSubmitLoading(false); }
          );
-        }
      }
+    }
  }

  const handleOk = () => { // 确定修改密码
@ -192,67 +192,67 @@ const Index: React.FC<{}> = () => {
    }
  }
  //浏览器类型
-  const BrowserType = () =>{
-      //取得浏览器的userAgent字符串
-      var userAgent = navigator.userAgent;
-      //判断是否IE<11
-      var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
-      //判断是否IE的Edge浏览器
-      var isEdge = userAgent.indexOf("Edge") > -1 && !isIE;
-      //判断是否IE11
-      var isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
-      if(isIE){
-          var reIE = new RegExp("MSIE(\\d+\\.\\d+);");
-          reIE.test(userAgent);
-          var fIEVersion = parseFloat(RegExp["$1"]);
-          if(fIEVersion == 7){
-              return 7;
-          }else if(fIEVersion == 8){
-              return 8;
-          }else if(fIEVersion == 9){
-              return 9;
-          }else if(fIEVersion == 10){
-              return 10;
-          }else{
-              //IE版本<=7
-              return 6;
-          }
-      }else if(isEdge){
-          return 'edge';
-      }else if(isIE11){
-          //IE11
-          whetherIE.current = true;
-          return 11;
-      }else{
-          //不是IE浏览器
-          return -1;
+  const BrowserType = () => {
+    //取得浏览器的userAgent字符串
+    var userAgent = navigator.userAgent;
+    //判断是否IE<11
+    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
+    //判断是否IE的Edge浏览器
+    var isEdge = userAgent.indexOf("Edge") > -1 && !isIE;
+    //判断是否IE11
+    var isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
+    if (isIE) {
+      var reIE = new RegExp("MSIE(\\d+\\.\\d+);");
+      reIE.test(userAgent);
+      var fIEVersion = parseFloat(RegExp["$1"]);
+      if (fIEVersion == 7) {
+        return 7;
+      } else if (fIEVersion == 8) {
+        return 8;
+      } else if (fIEVersion == 9) {
+        return 9;
+      } else if (fIEVersion == 10) {
+        return 10;
+      } else {
+        //IE版本<=7
+        return 6;
      }
+    } else if (isEdge) {
+      return 'edge';
+    } else if (isIE11) {
+      //IE11
+      whetherIE.current = true;
+      return 11;
+    } else {
+      //不是IE浏览器
+      return -1;
+    }
  }
  //初始化video
  const InitMedia = () => {
-    if(!whetherIE.current){
-        InitUserMedia({video : {width: 480, height: 320}}, success, error);
+    if (!whetherIE.current) {
+      InitUserMedia({ video: { width: 480, height: 320 } }, success, error);
    }
  };
  //访问用户媒体设备的兼容方法
  const InitUserMedia = (constraints: any, success: any, error: any) => {
    if (navigator.mediaDevices.getUserMedia) {
-        //最新的标准API
-        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
+      //最新的标准API
+      navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia) {
-        //webkit核心浏览器
-        navigator.webkitGetUserMedia(constraints,success, error);
+      //webkit核心浏览器
+      navigator.webkitGetUserMedia(constraints, success, error);
    } else if (navigator.mozGetUserMedia) {
-        //firfox浏览器
-        navigator.mozGetUserMedia(constraints, success, error);
+      //firfox浏览器
+      navigator.mozGetUserMedia(constraints, success, error);
    } else if (navigator.getUserMedia) {
-        //旧版API
-        navigator.getUserMedia(constraints, success, error);
+      //旧版API
+      navigator.getUserMedia(constraints, success, error);
    }
  }
  //调用媒体设备成功回调方法
  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';
    });
    if (result) {
@ -267,13 +267,13 @@ const Index: React.FC<{}> = () => {
    }
  }
  //调用媒体设备失败回调方法    
-  const error = (error:any) => {
-      message.warn('无法获取到摄像头权限，请确认是否存在摄像头及是否授权使用摄像头');
-      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
+  const error = (error: any) => {
+    message.warn('无法获取到摄像头权限，请确认是否存在摄像头及是否授权使用摄像头');
+    console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
  }

  //base64转blob
-  const base64ToBlob = (base64:string) =>{
+  const base64ToBlob = (base64: string) => {
    const parts = base64.split(";base64,");
    const contentType = parts[0].split(":")[1];
    const raw = window.atob(parts[1]);
@ -286,12 +286,12 @@ const Index: React.FC<{}> = () => {
  };

  //RgbToBase64
-  const RgbToBase64 = async (image:any) =>{
+  const RgbToBase64 = async (image: any) => {
    setSubmitLoading(true);
-    await rgbToBase64({image}).then(res => {
-      const _blob = base64ToBlob( 'data:image/jpg;base64,' + res.data);
+    await rgbToBase64({ image }).then(res => {
+      const _blob = base64ToBlob('data:image/jpg;base64,' + res.data);
      hanleFaceSubmit(_blob, null);
-    }).catch(e=>{
+    }).catch(e => {
      setSubmitLoading(false);
    });
  }
@ -299,11 +299,11 @@ const Index: React.FC<{}> = () => {
  //是https或者是本地
  const httpsOrLocal = () => {
    let protocol = document.location.protocol;
-    if(protocol == 'https'){
+    if (protocol == 'https') {
      return true;
-    }else{
+    } else {
      let host = window.location.hostname;
-      if(host == '127.0.0.1' || host == 'localhost'){
+      if (host == '127.0.0.1' || host == 'localhost') {
        return true;
      }
    }
@ -313,19 +313,19 @@ const Index: React.FC<{}> = () => {
  //是否允许人脸登录
  const allowedToFaceLogin = () => {
    let browseType = BrowserType()
-    if((browseType == 11 || browseType == -1) && httpsOrLocal()){
+    if ((browseType == 11 || browseType == -1) && httpsOrLocal()) {
      return true;
    }
    return false;
  }
-  
+

  useEffect(() => {
    cookie.remove('mall3_token');
    sessionStorage.clear();
    changeCaptcha();
-    if(!allowedToFaceLogin()){
-       setFaceLoginDisable(true);
+    if (!allowedToFaceLogin()) {
+      setFaceLoginDisable(true);
    }
  }, []);

@ -339,7 +339,7 @@ const Index: React.FC<{}> = () => {
        </div>
        <div className="main">
          <div className="text">
-            <Tabs defaultActiveKey="1" onChange={onChange} size = {'large'}>
+            <Tabs defaultActiveKey="1" onChange={onChange} size={'large'}>
              <TabPane tab="账号密码登录" key="1">
                <Form
                  name="basic"
@ -403,11 +403,11 @@ const Index: React.FC<{}> = () => {
                  <Form.Item>
                    <Button type="primary" className="w100" htmlType="submit">
                      登 录
-                  </Button>
+                    </Button>
                  </Form.Item>
                </Form>
              </TabPane>
-              <TabPane tab="人脸识别登录" key="2" disabled = {faceLoginDisable}>
+              <TabPane tab="人脸识别登录" key="2" disabled={faceLoginDisable}>
                <Form
                  name="basic2"
                  className="form-box"
@ -430,12 +430,12 @@ const Index: React.FC<{}> = () => {
                  </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>
-                  {/* onClick={() => {hanleFaceSubmit(null, null);}} */}
-                    <Button type="primary" className="w100" loading = {submitLoading} htmlType="submit">
-                      {submitLoading?'请稍候，正在验证中...':'登 录'}
+                    {/* onClick={() => {hanleFaceSubmit(null, null);}} */}
+                    <Button type="primary" className="w100" loading={submitLoading} htmlType="submit">
+                      {submitLoading ? '请稍候，正在验证中...' : '登 录'}
                    </Button>
                  </Form.Item>
                </Form>
--- a/src/services/login.ts
+++ b/src/services/login.ts
@ -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
+  });
+}