瀏覽代碼

修改登录页面验证码默认不显示,账号或密码输入超过3次 显示并需要输入验证码

画安 2 月之前
父節點
當前提交
e7b3ca68b6
共有 2 個文件被更改,包括 31 次插入2 次删除
  1. 1 1
      src/utils/request.js
  2. 30 1
      src/views/Login.vue

+ 1 - 1
src/utils/request.js

@@ -75,7 +75,7 @@ class RequestHttp {
         if (data.code === 401) {
           console.warn('Token已过期,请重新登录');
           localStorage.removeItem('token');
-          window.location.href = '/#/login';
+          window.location.href = '/login';
         }
 
         return Promise.reject(new Error(data.message || 'Error'));

+ 30 - 1
src/views/Login.vue

@@ -46,7 +46,7 @@
                     <input class="inp" type="password" v-model.trim="password" placeholder="请输入密码" />
                 </div>
     
-                <div class="row">
+                <div class="row" v-if="showCaptcha">
                     <div class="field cap-field">
                     <img class="i" :src="require('@/assets/i_captcha.png')" />
                     <span class="field-label">验证码</span>
@@ -97,8 +97,14 @@ export default {
       hint: "",
       isDoorOpening: false,
       doorNavigated: false,
+      loginFailedCount: Number(sessionStorage.getItem('loginFailedCount')) || 0,
     };
   },
+  computed: {
+    showCaptcha() {
+      return this.loginFailedCount >= 3;
+    }
+  },
   mounted() {
     this.updateScale();
     window.addEventListener('resize', this.updateScale, { passive: true });
@@ -118,6 +124,20 @@ export default {
     async onLogin() {
       this.hint = "";
 
+      // 如果验证码已显示,则进行前端拦截与校验
+      if (this.showCaptcha) {
+        if (!this.captchaInput) {
+          this.hint = "请输入验证码";
+          return;
+        }
+        // 前端比对验证码 (忽略大小写)
+        if (this.captchaInput.toLowerCase() !== this.captchaCode.toLowerCase()) {
+          this.hint = "验证码错误";
+          this.captchaInput = ""; // 验证码错误后清空输入框
+          return;
+        }
+      }
+
       let data;
       try {
         data = await apiLogin({
@@ -125,8 +145,17 @@ export default {
           password: this.password,
           captcha: this.captchaInput
         });
+
+        // 登录成功,重置次数并清空缓存
+        this.loginFailedCount = 0; 
+        sessionStorage.removeItem('loginFailedCount');
       } catch (e) {
         this.hint = e.message || '登录失败';
+        // 登录失败,次数 +1 并存入缓存
+        this.loginFailedCount++; 
+        sessionStorage.setItem('loginFailedCount', this.loginFailedCount);
+        this.captchaInput = "";
+        
         return;
       }