极验验证出错处理

public/index.html

@@ -19,6 +19,7 @@
         delete window.module;
       }
     </script>
+    <script src="https://static.geetest.com/static/tools/gt.js"></script>
   </head>
 
   <style>
@@ -110,6 +111,5 @@
         //   });
       })();
     </script>
-    <script src="https://static.geetest.com/static/tools/gt.js"></script>
   </body>
 </html>

src/features/Login/GeeTest.vue

@@ -8,45 +8,78 @@
 </template>
 
 <script>
+import { createLog } from "@/utils/logger";
 export default {
   name: "GeeTest",
+  props: {
+    reset: { type: Number, default: 0 },
+  },
   data() {
     return { loading: true };
   },
-  async mounted() {
-    const that = this;
-    function handler(captchaObj) {
-      that.$emit("on-load", captchaObj);
-      // 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交
-      captchaObj.appendTo("#captcha");
-      captchaObj.onReady(function () {
-        that.loading = false;
-      });
-    }
-
-    const res = await this.$http.post("/api/ecs_core/verifyCode/register", {
-      user_id: localStorage.getItem("uuidForEcs"),
-      client_type: "Web",
-    });
-    // console.log(res);
-    const data = res.data;
-    window.initGeetest(
-      {
-        gt: data.gt,
-        challenge: data.challenge,
-        new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
-        offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
-        product: "float", // 产品形式，包括：float，popup
-        width: "100%",
+  watch: {
+    reset: {
+      immediate: true,
+      handler() {
+        this.resetGee();
       },
-      handler
-    );
+    },
+  },
+  methods: {
+    async resetGee() {
+      const that = this;
+      function handler(captchaObj) {
+        that.$emit("on-load", captchaObj);
+        // 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交
+        captchaObj.appendTo("#captcha");
+        captchaObj.onReady(function () {
+          that.loading = false;
+        });
+        captchaObj.onError((error) => {
+          // 出错啦，可以提醒用户稍后进行重试
+          // error 包含error_code、msg
+          createLog({
+            currentPage: "极验",
+            errorCode: error.error_code,
+            msg: error.msg,
+          });
+          that.$Message.error({
+            content: "资源加载失败，请关闭程序，检查网络状况后重试。",
+            duration: 3 * 60,
+          });
+        });
+      }
+
+      const res = await this.$http.post("/api/ecs_core/verifyCode/register", {
+        user_id: localStorage.getItem("uuidForEcs"),
+        client_type: "Web",
+      });
+      // console.log(res);
+      const data = res.data;
+      if (!data.success) {
+        createLog({
+          currentPage: "极验",
+          error: "极验API宕机",
+        });
+      }
+      window.initGeetest(
+        {
+          gt: data.gt,
+          challenge: data.challenge,
+          new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
+          offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
+          product: "float", // 产品形式，包括：float，popup
+          width: "100%",
+        },
+        handler
+      );
+    },
   },
 };
 </script>
 
 <style>
-.geetest_holder.geetest_wind {
+/* .geetest_holder.geetest_wind {
   min-width: 220px !important;
-}
+} */
 </style>

src/features/Login/Login.vue

@@ -85,7 +85,7 @@
               class="form-item-style"
               style="height: 40px; margin-top: 0px;"
             >
-              <GeeTest @on-load="handleGtResult" />
+              <GeeTest :reset="resetGeeTime" @on-load="handleGtResult" />
             </i-form-item>
 
             <i-form-item style="position: relative;">
@@ -199,6 +199,7 @@ export default {
         ],
       },
       captchaObj: null,
+      resetGeeTime: Date.now(),
       loginBtnLoading: false,
       disableLoginBtnBecauseRemoteApp: true,
       disableLoginBtnBecauseVCam: true,
@@ -478,8 +479,10 @@ export default {
       this.loginBtnLoading = true;
       const before = Date.now();
 
-      if (!this.captchaObj.getValidate()) {
+      // console.log(this.captchaObj.getValidate());
+      if (!this.captchaObj || !this.captchaObj.getValidate()) {
         this.$Message.error("请完成验证");
+        this.loginBtnLoading = false;
         return;
       }
       try {
@@ -650,7 +653,10 @@ export default {
         window._hmt.push(["_trackEvent", "登录页面", "登录失败", data.desc]);
         createLog({ currentPage: "登录页面", action: "登录失败" });
         this.errorInfo = data.desc;
-        this.captchaObj.reset();
+        // this.captchaObj.reset();
+        this.captchaObj.destroy();
+        // this.captchaObj = null;
+        this.resetGeeTime = Date.now();
       }
     },
     async checkNewVersion() {
@@ -1092,8 +1098,8 @@ export default {
 
 .content {
   margin-top: 100px;
-  margin-left: 65%;
-  width: 300px;
+  margin-left: 60%;
+  width: 340px;
   border-radius: 6px;
   background-color: white;
   display: grid;