Переглянути джерело

用户 login() 方法进行保护,一个不结束,不让重复点击

Michael Wang 5 роки тому
батько
коміт
bd303c75ae
1 змінених файлів з 20 додано та 7 видалено
  1. 20 7
      src/features/Login/Login.vue

+ 20 - 7
src/features/Login/Login.vue

@@ -79,7 +79,7 @@
                 v-model="loginForm.password"
                 type="password"
                 size="large"
-                @on-enter="login"
+                @on-enter="loginForuser"
               >
                 <i-icon slot="prepend" type="ios-lock"></i-icon>
               </i-input>
@@ -97,7 +97,7 @@
                 long
                 :disabled="disableLoginBtn"
                 :loading="loginBtnLoading"
-                @click="login"
+                @click="loginForuser"
               >
                 {{ newVersionAvailable ? "点击更新版本" : "登录" }}
               </i-button>
@@ -401,12 +401,28 @@ export default {
           });
       }
     },
+    async loginForuser() {
+      // 供user点击的 login 方法。主要是保护 login 方法,不因为user重复点击,多个请求不按预期时间进行。
+      if (this.loginBtnLoading) {
+        return;
+      }
+      this.loginBtnLoading = true;
+      const before = Date.now();
+
+      try {
+        await this.login();
+      } finally {
+        const end = Date.now();
+        this.loginTimeout = setTimeout(() => {
+          this.loginBtnLoading = false;
+        }, 10 * 1000 - (end - before));
+      }
+    },
     async login() {
       // epcc立即登录
-      if (!this.isEPCC && (this.disableLoginBtn || this.loginBtnLoading)) {
+      if (!this.isEPCC && this.disableLoginBtn) {
         return;
       }
-      this.loginBtnLoading = true;
 
       try {
         const hasNewVersion = await this.checkNewVersion();
@@ -415,9 +431,6 @@ export default {
         console.log("检测新版本出错");
       }
 
-      this.loginTimeout = setTimeout(() => {
-        this.loginBtnLoading = false;
-      }, 10 * 1000);
       let loginResponse;
       if (!this.isEPCC) {
         // https://www.cnblogs.com/weiqinl/p/6708993.html