feat: 验证码请求限流处理

src/api/all/common.ts

@@ -72,3 +72,8 @@ export const getImagePreSignedUrl = (params = {}) => {
 export const getVideoPreSignedUrl = (params = {}) => {
   return Http.get('/v1/oss/video-pre-signed-url', params);
 };
+
+// 清除限流
+export const postClearRateLimiter = (params = {}) => {
+  return Http.post(`/v1/rate-limiter/clear`, params);
+};

src/views/login/components/login-form/index.vue

@@ -117,6 +117,7 @@ const { TabPane } = Tabs;
 import PuzzleVerification from '../PuzzleVerification.vue';
 import SelectAccountModal from '../select-account-modal/index.vue';
 import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo, postLoginPassword } from '@/api/all/login';
+import { postClearRateLimiter } from '@/api/all/common';
 import { joinEnterpriseByInviteCode } from '@/api/all';
 import { ref, reactive, onUnmounted, computed } from 'vue';
 import { useUserStore } from '@/stores';
@@ -239,27 +240,35 @@ const getCode = async () => {
   if (!canGetCaptcha.value) return;
 
   formRef.value.validateFields('mobile').then(() => {
-    isVerificationVisible.value = true;
+    getCaptcha();
   });
 };
 
-// 验证码验证通过后
+const getCaptcha = async () => {
-const handleVerificationSubmit = async () => {
-  isVerificationVisible.value = false;
-  startCountdown();
-
   try {
     const { code, message: msg } = await fetchLoginCaptCha({ mobile: loginForm.mobile });
     if (code === 200) {
+      startCountdown();
       message.success(msg);
     }
   } catch (error) {
     // 重置倒计时
     countdown.value = 0;
     clearInterval(timer.value);
+
+    if (error.status === 429) {
+      isVerificationVisible.value = true;
+    }
   }
 };
 
+// 验证码验证通过后
+const handleVerificationSubmit = () => {
+  isVerificationVisible.value = false;
+  postClearRateLimiter();
+  getCaptcha();
+};
+
 const onTabChange = () => {
   errMsg.value = '';
 };

src/views/login/components/register-form/index.vue

@@ -103,6 +103,7 @@ const { Link } = Typography;
 const { TabPane } = Tabs;
 import PuzzleVerification from '../PuzzleVerification.vue';
 import SelectAccountModal from '../select-account-modal/index.vue';
+import { postClearRateLimiter } from '@/api/all/common';
 import { postRegisterCaptcha,postForgetPasswordCaptcha, fetchProfileInfo, postRegister, postForgetPassword } from '@/api/all/login';
 import { joinEnterpriseByInviteCode } from '@/api/all';
 import { ref, reactive, onUnmounted, computed } from 'vue';
@@ -258,28 +259,36 @@ const getCode = async () => {
   }
 
   formRef.value.validateFields('mobile').then(() => {
-    isVerificationVisible.value = true;
+    getCaptcha();
   });
 };
 
-// 验证码验证通过后
+const getCaptcha = async () => {
-const handleVerificationSubmit = async () => {
-  isVerificationVisible.value = false;
-  startCountdown();
-
   try {
     const fn = isResetPassword.value ? postForgetPasswordCaptcha : postRegisterCaptcha;
     const { code, message: msg } = await fn({ mobile: formData.value.mobile });
     if (code === 200) {
+      startCountdown()
       message.success(msg);
     }
   } catch (error) {
     // 重置倒计时
     countdown.value = 0;
     clearInterval(timer.value);
+
+    if (error.status === 429) {
+      isVerificationVisible.value = true;
+    }
   }
 };
 
+// 验证码验证通过后
+const handleVerificationSubmit = () => {
+  isVerificationVisible.value = false;
+  postClearRateLimiter();
+  getCaptcha();
+};
+
 // 获取用户信息
 const getProfileInfo = async () => {
   const { code, data } = await fetchProfileInfo();