登录页面验证码

src/apis/modules/common.js

@@ -5,5 +5,9 @@ export const getRegion = (params) => request.basic.get('/region', params)
 
 // 获取 验证码ID
 export const getCaptcha = (params) => request.basic.get('/api/v1/captcha/id', params)
+
+// 获取图片
+export const getCaptchaImage = (params) => request.basic.get('/api/v1/captcha/image', params , { responseType: 'blob' })
+
 //上传图片
 export const uploadImg=(params)=>request.basic.post('/api/v1/upload',params,{Headers:{'Content-Type': 'multipart/form-data'}})

src/utils/request.js

@@ -20,8 +20,7 @@ const options = {
     },
     interceptorRequestCatch: () => {},
     interceptorResponse: (response) => {
-        console.log('response',response)
+        const list = ['/api/v1/activity-details/export', '/api/v1/captcha/image']
-        const list=['/api/v1/activity-details/export']
         // 错误处理
         const { success, msg = 'Network Error' } = response.data || {}
         if (![true].includes(success) && !list.includes(response.config.url)){

src/views/login/index.vue

@@ -2,17 +2,10 @@
     <div>
         <a-tabs>
             <!-- 账号登录 -->
-            <a-tab-pane
+            <a-tab-pane key="account" :tab="$t('pages.login.accountLogin.tab')">
-                key="account"
+                <a-form :model="formData" :rules="formRules" ref="formRef">
-                :tab="$t('pages.login.accountLogin.tab')">
-                <a-form
-                    :model="formData"
-                    :rules="formRules"
-                    ref="formRef">
                     <a-form-item name="username">
-                        <a-input
+                        <a-input :placeholder="$t('pages.login.username.placeholder')" v-model:value="formData.username"
-                            :placeholder="$t('pages.login.username.placeholder')"
-                            v-model:value="formData.username"
                             size="large">
                             <template #prefix>
                                 <user-outlined></user-outlined>
@@ -20,18 +13,14 @@
                         </a-input>
                     </a-form-item>
                     <a-form-item name="password">
-                        <a-input
+                        <a-input v-model:value="formData.password" size="large" type="password"
-                            v-model:value="formData.password"
+                            :placeholder="$t('pages.login.password.placeholder')" @pressEnter="handleLogin">
-                            size="large"
-                            type="password"
-                            :placeholder="$t('pages.login.password.placeholder')"
-                            @pressEnter="handleLogin">
                             <template #prefix>
                                 <lock-outlined></lock-outlined>
                             </template>
                         </a-input>
                     </a-form-item>
-                    <!-- <a-form-item name="captcha_code">
+                    <a-form-item name="captcha_code">
                         <a-space>
                             <a-input
                                 v-model:value="formData.captcha_code"
@@ -50,15 +39,10 @@
                                 :height="42"
                                 :src="captcha_img" />
                         </a-space>
-                    </a-form-item> -->
+                    </a-form-item>
                     <a-form-item>
-                        <a-button
+                        <a-button type="primary" size="large" block :loading="loading" @click="handleLogin">{{
-                            type="primary"
+                            $t('pages.login.submit') }}
-                            size="large"
-                            block
-                            :loading="loading"
-                            @click="handleLogin"
-                            >{{ $t('pages.login.submit') }}
                         </a-button>
                     </a-form-item>
                 </a-form>
@@ -124,27 +108,33 @@ async function getCaptcha() {
 async function handleLogin() {
     formRef.value.validate().then(async (values) => {
         values.captcha_id = captcha_id.value
-        if (values.password === 'abc-123') values.password = md5(values.password)
+        if (values.password === 'abc-123') {
+            values.password = md5(values.password)
+        }
 
         loading.value = true
-        const { success } = await userStore
+        try {
-            .login({
+            const response = await userStore.login({ ...values })
-                ...values,
-            })
-            .catch(() => {
             loading.value = false
-                getCaptcha()
+            if (config('http.code.success') === response.success) {
-            })
-        loading.value = false
-        if (config('http.code.success') === success) {
-            // 加载完成
                 if (appStore.complete) {
                     goIndex()
                 } else {
                     await appStore.init()
                     goIndex()
                 }
+            } else {
+                message.error(t(response.msg))
             }
+        } catch (error) {
+            loading.value = false
+            getCaptcha()
+            const msg = error.msg || error.message || '登录失败，请重试'
+            message.error(t(msg))
+            console.log("登录出错：", error)
+        }
+    }).catch(validationError => {
+        console.log('表单校验失败', validationError)
     })
 }