3.30 渗透测试修改专家修改密码

src/pages/userformal/login/index.tsx

@@ -12,6 +12,7 @@ import FrameFaceLogin from '../faceLogin/FrameFaceLogin';
 import LivingNotIE from './living.min.js';
 import { _KJUR } from './jsrsasign-latest-all-min';
 import { time } from 'echarts';
+import request from '@/utils/request';
 
 const layout = {
   labelCol: { span: 7 },
@@ -28,6 +29,7 @@ const Index: React.FC<{}> = () => {
   const [form2] = Form.useForm();
   const [imgUrl, setImgUrl] = useState<any>('');
   const [tmpToken, setTmpToken] = useState<any>('');
+  const [imgUrlEdit, setImgUrlEdit] = useState<any>('');
   const remainingTime = 3 //刷新token的剩余时间，单位小时
   const [changeForm] = Form.useForm();
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
@@ -43,6 +45,7 @@ const Index: React.FC<{}> = () => {
   const [itemShow, setItemShow] = useState<boolean>(false);
   const [action, setAction] = useState<number>(1);
   const [timer, setTimer] = useState<number>(10000);
+  const urlRef = useRef<any>("");
   /**
    * 设置活体检测token
    */
@@ -192,6 +195,32 @@ const Index: React.FC<{}> = () => {
     setTmpToken(tmpToken);
     setImgUrl(url);
   };
+  const changeCaptchaEdit = async () => {//修改密码-获取验证码
+    let tmpToken = genRandomString(16);
+
+    // 获取window的URL对像 并做好浏览器兼容性处理
+    const windowUrl = window.URL || window.webkitURL
+    windowUrl.revokeObjectURL(urlRef.current);
+    // 开始ajax请求
+    const xhr = new XMLHttpRequest()
+    // 验证码请求地址
+    const url = '/api/api/mall-expe/v1/expebaseinfo/getCaptcha?token=' + tmpToken
+    xhr.open('POST', url, true)
+    // 设置响应数据的类型 blod是将响应数据转换成二进制数据的Blob对象
+    xhr.responseType = 'blob'
+    xhr.onload = function () {
+      if (this.status === 200) {
+        const blob = this.response
+        // 将响应数据转换成url对象 赋值给src变量 传递给img
+        const blob_url = windowUrl.createObjectURL(blob);
+        urlRef.current = blob_url;
+        changeForm.setFieldsValue({ token: tmpToken });
+        setImgUrlEdit(blob_url);
+      }
+    };
+
+    xhr.send();
+  }
 
   //登录刷新Token方法
   const refreshToken = async (data: any) => {
@@ -314,21 +343,14 @@ const Index: React.FC<{}> = () => {
         message.warn('两次密码输入不一致，请重新输入')
       } else {
         setSping(true);
-        const date = {
-          identityCard: changeForm.getFieldValue("identityCard"),
-          oldPassword: changeForm.getFieldValue("oldPassword"),
-          newPassword: changeForm.getFieldValue("newPassword"),
-        };
+        const date = changeForm.getFieldsValue();
         changePass({ ...date }).then(res => {
           if (res.success) {
-            setSping(false);
-            setIsModalVisible(false)
+            setIsModalVisible(false);
             message.success('修改密码成功');
-            changeForm.resetFields()
-          } else {
-            setSping(false);
           }
         }).finally(() => {
+          changeCaptchaEdit();
           setSping(false);
         });
       }
@@ -485,13 +507,20 @@ const Index: React.FC<{}> = () => {
     }
   }, []);
 
+  useEffect(() => {
+    if (isModalVisible) {
+      changeForm.resetFields()
+      changeCaptchaEdit();
+    }
+  }, [isModalVisible]);
+
   return (
     <Spin spinning={spinning}>
       <div className="login-box">
         <div className="top">
           <img src={logo} />
           <h3>中国联通智慧供应链平台 | 招标采购中心</h3>
-          <Button className="change" danger style={{ borderColor: '#b30000', color: '#b30000' }} onClick={() => (setIsModalVisible(true), changeForm.resetFields())}>修改密码</Button>
+          <Button className="change" danger style={{ borderColor: '#b30000', color: '#b30000' }} onClick={() => (setIsModalVisible(true))}>修改密码</Button>
         </div>
         <div className="main">
           <div className="text">
@@ -614,7 +643,7 @@ const Index: React.FC<{}> = () => {
           visible={isModalVisible}
           onCancel={() => setIsModalVisible(false)}
           footer={[
-            <Button onClick={() => handleOk()} loading={spinning}>确 定</Button>,
+            <Button type='primary' onClick={() => handleOk()} loading={spinning}>确 定</Button>,
             <Button onClick={() => setIsModalVisible(false)}>取 消</Button>
           ]}
           width={600}
@@ -726,6 +755,27 @@ const Index: React.FC<{}> = () => {
               >
                 <Input.Password />
               </Form.Item>
+              <Form.Item
+                name="token"
+                hidden
+              >
+                <Input />
+              </Form.Item>
+              <Form.Item label="验证码" required>
+                <Form.Item
+                  noStyle
+                  name="code"
+                  rules={[{ required: true, message: '请输入验证码!' }]}
+                >
+                  <Input
+                    style={{ width: "calc(60% - 8px)", marginRight: 8 }}
+                    placeholder="请输入验证码"
+                  />
+                </Form.Item>
+                <Form.Item noStyle>
+                  <img className="verification" onClick={() => changeCaptchaEdit()} src={imgUrlEdit} style={{ width: "40%" }} />
+                </Form.Item>
+              </Form.Item>
             </Form>
           </Spin>
         </Modal>