登录加入连续错误三次必须验证功能

src/services/UserService.ts

@@ -13,8 +13,8 @@ class UserServices{
         return Api.Post("travel_collect",msg)
     }
 
-    static async PasswordLoginAsync(account:string,pwd:string,tid:string=''):Promise<HttpResponse>{
-        let msg = {account,pwd,tid}
+    static async PasswordLoginAsync(account:string,pwd:string,v_token:string,tid:string=''):Promise<HttpResponse>{
+        let msg = {account,pwd,v_token,tid}
         return Api.Post("travel_login_password",msg)
     }
 
@@ -77,5 +77,9 @@ class UserServices{
         let msg = {mail}
         return Api.Post("travel_regist_mail",msg)
     }
+    static async NeedVerifyStatusAsync():Promise<HttpResponse>{
+        let msg = {}
+        return Api.Post("travel_login_verify",msg)
+    }
 }
 export default UserServices;
\ No newline at end of file

src/store/user.ts

@@ -21,6 +21,7 @@ const st: StorageLike = {
 
 export interface UserLoginResult {
     status:'ERROR'|'CHOSEN'|'SUCCESS',
+    verify:boolean,
     data?:any[]
 }
 export interface AutoLoginResult{
@@ -107,9 +108,9 @@ export const useUserStore = defineStore('user', {
                 this.userInfo.logo = ENTERPRISE_DEFAULT_HEADER
             }
         },
-        async setUserPasswordLoginAsync(account:string,pwd:string,tid:string='') {
+        async setUserPasswordLoginAsync(account:string,pwd:string,vtoken:string,tid:string='') {
             try {
-                let response = await UserService.PasswordLoginAsync(account,pwd,tid)
+                let response = await UserService.PasswordLoginAsync(account,pwd,vtoken,tid)
                 if (response.data.resultCode == ApiResult.SUCCESS) {
                     if(!Array.isArray(response.data.data)) {
                         this.token = response.data.data.token
@@ -120,14 +121,14 @@ export const useUserStore = defineStore('user', {
                         if(!this.userInfo.logo || !this.userInfo.logo.includes('http://')|| !this.userInfo.logo.includes('https://')){
                             this.userInfo.logo = ENTERPRISE_DEFAULT_HEADER
                         }
-                        return { status:'SUCCESS' } as UserLoginResult
+                        return { status:'SUCCESS',verify:false  } as UserLoginResult
                     } else {
-                        return { status:'CHOSEN', data:response.data.data } as UserLoginResult
+                        return { status:'CHOSEN', data:response.data.data,verify:false } as UserLoginResult
                     }
                     
-                }
+                } else return { status:'ERROR',verify:response.data.data==1 } as UserLoginResult
             } catch (error) {}
-            return { status:'ERROR' } as UserLoginResult
+            return { status:'ERROR',verify:true } as UserLoginResult
         },
         setOldSaPermission(ia:boolean){
             this.userInfo.ia = ia

src/views/Auth/Login.vue

@@ -45,9 +45,14 @@
                     <el-form-item label="" prop="password">
                         <el-input v-model="model.password" type="password" placeholder="密码" autocomplete="new-password" show-password  class="q-mt-lg"/>
                     </el-form-item>
-                    <div class="text-right">
-                        <el-button link type="primary" class="q-mb-lg">忘记密码？</el-button>
-                    </div>
+                    <el-form-item label="">
+                        <div class="row q-mt-lg full-width">
+                            <div class="col">
+                                <vue-hcaptcha ref="invisibleHcaptcha" sitekey="46e00e53-ddb2-4e7b-9c51-621534c2f1f5" @verify="verifyHandler" v-if="needVerify"></vue-hcaptcha>
+                            </div>
+                            <el-button link type="primary">忘记密码？</el-button>
+                        </div>
+                    </el-form-item>
                     <el-form-item>
                         <el-button type="primary" class="full-width q-mb-lg" @click="submitForm(loginFormRef)" :loading="loading">登录</el-button>
                     </el-form-item>
@@ -93,9 +98,13 @@
     </div>
 </template>
 <script lang="ts" setup>
+import { ApiResult } from '@/configs/axios';
+import UserServices from '@/services/UserService';
 import { useUserStore } from '@/store/user';
 import { ElMessage, FormInstance, FormRules } from 'element-plus';
 import { reactive, ref } from 'vue';
+import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
+
 interface RuleForm {
   account: string
   password: string
@@ -112,6 +121,9 @@ const token = user.getUserToken??''
 const userInfo = user.getUser
 const multipleUsers = ref<any[]>([])
 const inviteInfo = ref<any>()
+const needVerify = ref(false)
+const validateToken = ref('')
+const invisibleHcaptcha = ref()
 
 if(localStorage.getItem("invite")){
     inviteInfo.value = JSON.parse(localStorage.getItem("invite")??'{}')
@@ -128,7 +140,7 @@ const rules = reactive<FormRules<RuleForm>>({
 })
 
 const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl || loading.value) return
+  if (!formEl || loading.value || (needVerify.value && validateToken.value=='')) return
   loading.value=true
   await formEl.validate(async (valid) => {
     if (valid) {
@@ -146,13 +158,16 @@ const loginByCompany = async ()=>{
     if(model.value.tid=='') ElMessage.error({message:'请选择需要登录的组织'})
     else {
         loading.value=true
+        validateToken.value=''
         await userLoginHandler()
         loading.value=false
     }
 }
-
+const verifyHandler = (token:string,ekey:string)=>{
+    validateToken.value = token
+}
 const userLoginHandler = async ()=>{
-    const result = await user.setUserPasswordLoginAsync(model.value.account,model.value.password,model.value.tid)
+    const result = await user.setUserPasswordLoginAsync(model.value.account,model.value.password,validateToken.value,model.value.tid)
     if(result.status=='SUCCESS'){
         ElMessage.success({message:'登录成功'})
         if(inviteInfo.value){
@@ -163,6 +178,8 @@ const userLoginHandler = async ()=>{
     }else if(result.status=='CHOSEN' && Array.isArray(result.data)){
         multipleUsers.value = result.data
     }else{
+        if(!needVerify.value) needVerify.value = result.verify
+        if(invisibleHcaptcha.value && needVerify.value) invisibleHcaptcha.value.reset()
         ElMessage.error({message:'账号或密码错误'})
     }
 }
@@ -181,7 +198,13 @@ const clearCompanyChoosenHandler = ()=>{
 const loginOutHandler = ()=>{
     user.setUserLoginOut()
 }
-
+const verifyCheckHandler = async ()=>{
+    const response = await UserServices.NeedVerifyStatusAsync()
+    if(response.data.resultCode == ApiResult.SUCCESS){
+        needVerify.value = response.data.data==1
+    } else needVerify.value = true
+}
+verifyCheckHandler()
 </script>
 <style>
 .login-box{