refactor: 优化登录验证码开关代码

Author: Charles7c

src/apis/auth/type.ts

@@ -45,7 +45,6 @@ export interface RouteItem {
 export interface AccountLoginReq {
   username: string
   password: string
-  unCaptcha: boolean
   captcha: string
   uuid: string
 }

src/apis/common/captcha.ts

@@ -5,11 +5,6 @@ export type * from './type'
 
 const BASE_URL = '/captcha'
 
-/** @desc 获取图片验证码 */
-export function getCaptchaConfig() {
-  return http.get<boolean>(`${BASE_URL}/config`)
-}
-
 /** @desc 获取图片验证码 */
 export function getImageCaptcha() {
   return http.get<T.ImageCaptchaResp>(`${BASE_URL}/image`)

src/apis/common/type.ts

@@ -3,6 +3,7 @@ export interface ImageCaptchaResp {
   uuid: string
   img: string
   expireTime: number
+  isEnabled: boolean
 }
 
 /** 仪表盘公告类型 */

src/apis/system/type.ts

@@ -293,17 +293,6 @@ export interface SiteConfig {
   SITE_BEIAN: OptionResp
 }
 
-/** 邮箱配置类型 */
-export interface MailConfig {
-  MAIL_PROTOCOL: OptionResp
-  MAIL_HOST: OptionResp
-  MAIL_PORT: OptionResp
-  MAIL_USERNAME: OptionResp
-  MAIL_PASSWORD: OptionResp
-  MAIL_SSL_ENABLED: OptionResp
-  MAIL_SSL_PORT: OptionResp
-}
-
 /** 安全配置类型 */
 export interface SecurityConfig {
   PASSWORD_ERROR_LOCK_COUNT: OptionResp
@@ -316,9 +305,20 @@ export interface SecurityConfig {
   PASSWORD_REQUIRE_SYMBOLS: OptionResp
 }
 
-/** 安全配置类型 */
-export interface CaptchaSetting {
-  NEED_CAPTCHA: OptionResp
+/** 邮箱配置类型 */
+export interface MailConfig {
+  MAIL_PROTOCOL: OptionResp
+  MAIL_HOST: OptionResp
+  MAIL_PORT: OptionResp
+  MAIL_USERNAME: OptionResp
+  MAIL_PASSWORD: OptionResp
+  MAIL_SSL_ENABLED: OptionResp
+  MAIL_SSL_PORT: OptionResp
+}
+
+/** 登录配置类型 */
+export interface LoginConfig {
+  LOGIN_CAPTCHA_ENABLED: OptionResp
 }
 
 /** 绑定三方账号信息 */

src/views/login/components/account/index.vue

@@ -1,18 +1,23 @@
 <template>
   <a-form
-      ref="formRef" :model="form" :rules="rules" :label-col-style="{ display: 'none' }"
-      :wrapper-col-style="{ flex: 1 }" size="large" @submit="handleLogin"
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    :label-col-style="{ display: 'none' }"
+    :wrapper-col-style="{ flex: 1 }"
+    size="large"
+    @submit="handleLogin"
   >
     <a-form-item field="username" hide-label>
-      <a-input v-model="form.username" placeholder="请输入用户名" allow-clear/>
+      <a-input v-model="form.username" placeholder="请输入用户名" allow-clear />
     </a-form-item>
     <a-form-item field="password" hide-label>
-      <a-input-password v-model="form.password" placeholder="请输入密码"/>
+      <a-input-password v-model="form.password" placeholder="请输入密码" />
     </a-form-item>
-    <a-form-item field="captcha" hide-label v-if="unCaptcha">
-      <a-input v-model="form.captcha" placeholder="请输入验证码" :max-length="4" allow-clear style="flex: 1 1"/>
+    <a-form-item v-if="isCaptchaEnabled" field="captcha" hide-label>
+      <a-input v-model="form.captcha" placeholder="请输入验证码" :max-length="4" allow-clear style="flex: 1 1" />
       <div class="captcha-container" @click="getCaptcha">
-        <img :src="captchaImgBase64" alt="验证码" class="captcha"/>
+        <img :src="captchaImgBase64" alt="验证码" class="captcha" />
         <div v-if="form.expired" class="overlay">
           <p>已过期，请刷新</p>
         </div>
@@ -33,11 +38,11 @@
 </template>
 
 <script setup lang="ts">
-import {type FormInstance, Message} from '@arco-design/web-vue'
-import {useStorage} from '@vueuse/core'
-import {getCaptchaConfig, getImageCaptcha} from '@/apis/common'
-import {useTabsStore, useUserStore} from '@/stores'
-import {encryptByRsa} from '@/utils/encrypt'
+import { type FormInstance, Message } from '@arco-design/web-vue'
+import { useStorage } from '@vueuse/core'
+import { getImageCaptcha } from '@/apis/common'
+import { useTabsStore, useUserStore } from '@/stores'
+import { encryptByRsa } from '@/utils/encrypt'
 
 const loginConfig = useStorage('login-config', {
   rememberMe: true,
@@ -46,24 +51,23 @@ const loginConfig = useStorage('login-config', {
   // username: debug ? 'admin' : '', // 演示默认值
   // password: debug ? 'admin123' : '', // 演示默认值
 })
-// 是否开启验证码
-const unCaptcha = ref(true)
+// 是否启用验证码
+const isCaptchaEnabled = ref(true)
 // 验证码图片
 const captchaImgBase64 = ref()
 
 const formRef = ref<FormInstance>()
 const form = reactive({
   username: loginConfig.value.username,
   password: loginConfig.value.password,
-  unCaptcha: unCaptcha.value,
   captcha: '',
   uuid: '',
   expired: false,
 })
 const rules: FormInstance['rules'] = {
-  username: [{required: true, message: '请输入用户名'}],
-  password: [{required: true, message: '请输入密码'}],
-  captcha: [{required: unCaptcha.value, message: '请输入验证码'}],
+  username: [{ required: true, message: '请输入用户名' }],
+  password: [{ required: true, message: '请输入密码' }],
+  captcha: [{ required: isCaptchaEnabled.value, message: '请输入验证码' }],
 }
 
 // 验证码过期定时器
@@ -91,25 +95,15 @@ onBeforeUnmount(() => {
 // 获取验证码
 const getCaptcha = () => {
   getImageCaptcha().then((res) => {
-    const {uuid, img, expireTime} = res.data
-    form.uuid = uuid
+    const { uuid, img, expireTime, isEnabled } = res.data
+    isCaptchaEnabled.value = isEnabled
     captchaImgBase64.value = img
+    form.uuid = uuid
     form.expired = false
     startTimer(expireTime)
   })
 }
 
-const initCaptchaConfig = () => {
-  getCaptchaConfig().then((res) => {
-    const result = res.data
-    if (result.NEED_CAPTCHA == 0) {
-      unCaptcha.value = false
-    } else {
-      getCaptcha()
-    }
-  })
-}
-
 const userStore = useUserStore()
 const tabsStore = useTabsStore()
 const router = useRouter()
@@ -123,19 +117,18 @@ const handleLogin = async () => {
     await userStore.accountLogin({
       username: form.username,
       password: encryptByRsa(form.password) || '',
-      unCaptcha: form.unCaptcha,
       captcha: form.captcha,
       uuid: form.uuid,
     })
     tabsStore.reset()
-    const {redirect, ...othersQuery} = router.currentRoute.value.query
+    const { redirect, ...othersQuery } = router.currentRoute.value.query
     await router.push({
       path: (redirect as string) || '/',
       query: {
         ...othersQuery,
       },
     })
-    const {rememberMe} = loginConfig.value
+    const { rememberMe } = loginConfig.value
     loginConfig.value.username = rememberMe ? form.username : ''
     Message.success('欢迎使用')
   } catch (error) {
@@ -147,7 +140,7 @@ const handleLogin = async () => {
 }
 
 onMounted(() => {
-  initCaptchaConfig()
+  getCaptcha()
 })
 </script>
 

src/views/system/config/components/CaptchaSetting.vue renamed to src/views/system/config/components/LoginSetting.vue

@@ -1,81 +1,76 @@
 <template>
   <a-spin :loading="loading">
     <a-form
-        ref="formRef"
-        :model="form"
-        auto-label-width
-        label-align="left"
-        :layout="width >= 500 ? 'horizontal' : 'vertical'"
-        :disabled="!isUpdate"
-        scroll-to-first-error>
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      auto-label-width
+      label-align="left"
+      :layout="width >= 500 ? 'horizontal' : 'vertical'"
+      :disabled="!isUpdate"
+      scroll-to-first-error
+    >
       <a-form-item
-          field="NEED_CAPTCHA"
-          :label="captchaSetting.NEED_CAPTCHA.name"
+        field="LOGIN_CAPTCHA_ENABLED"
+        :label="loginConfig.LOGIN_CAPTCHA_ENABLED.name"
       >
-        <a-switch v-model="form.NEED_CAPTCHA" type="round" :checked-value="1" :unchecked-value="0">
+        <a-switch
+          v-model="form.LOGIN_CAPTCHA_ENABLED"
+          type="round"
+          :checked-value="1"
+          :unchecked-value="0"
+        >
           <template #checked>是</template>
           <template #unchecked>否</template>
         </a-switch>
       </a-form-item>
-
       <a-space style="margin-bottom: 16px">
         <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
-          <template #icon>
-            <icon-edit/>
-          </template>
-          修改
+          <template #icon><icon-edit /></template>修改
         </a-button>
         <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
-          <template #icon>
-            <icon-undo/>
-          </template>
-          恢复默认
+          <template #icon><icon-undo /></template>恢复默认
         </a-button>
         <a-button v-if="isUpdate" type="primary" @click="handleSave">
-          <template #icon>
-            <icon-save/>
-          </template>
-          保存
+          <template #icon><icon-save /></template>保存
         </a-button>
         <a-button v-if="isUpdate" @click="reset">
-          <template #icon>
-            <icon-refresh/>
-          </template>
-          重置
+          <template #icon><icon-refresh /></template>重置
         </a-button>
         <a-button v-if="isUpdate" @click="handleCancel">
-          <template #icon>
-            <icon-undo/>
-          </template>
-          取消
+          <template #icon><icon-undo /></template>取消
         </a-button>
       </a-space>
     </a-form>
   </a-spin>
 </template>
 
 <script setup lang="ts">
-import {useWindowSize} from '@vueuse/core'
-import {type FormInstance, Message, Modal} from '@arco-design/web-vue'
-import {type CaptchaSetting, listOption, type OptionResp, resetOptionValue, updateOption} from '@/apis/system'
-import {useResetReactive} from '@/hooks'
+import { useWindowSize } from '@vueuse/core'
+import { type FormInstance, Message, Modal } from '@arco-design/web-vue'
+import { type LoginConfig, type OptionResp, listOption, resetOptionValue, updateOption } from '@/apis/system'
+import { useResetReactive } from '@/hooks'
 
-defineOptions({name: 'CaptchaSetting'})
-const {width} = useWindowSize()
+defineOptions({ name: 'LoginSetting' })
+const { width } = useWindowSize()
 
 const loading = ref<boolean>(false)
 const formRef = ref<FormInstance>()
 const [form] = useResetReactive({
-  NEED_CAPTCHA: 1,
+  LOGIN_CAPTCHA_ENABLED: 1,
 })
+const rules: FormInstance['rules'] = {
+  LOGIN_CAPTCHA_ENABLED: [{ required: true, message: '请选择' }],
+}
 
-const captchaSetting = ref<CaptchaSetting>({
-  NEED_CAPTCHA: {},
+const loginConfig = ref<LoginConfig>({
+  LOGIN_CAPTCHA_ENABLED: {},
 })
+
 // 重置
 const reset = () => {
   formRef.value?.resetFields()
-  form.NEED_CAPTCHA = captchaSetting.value.NEED_CAPTCHA.value
+  form.LOGIN_CAPTCHA_ENABLED = loginConfig.value.LOGIN_CAPTCHA_ENABLED.value || 0
 }
 
 const isUpdate = ref(false)
@@ -91,29 +86,31 @@ const handleCancel = () => {
 }
 
 const queryForm = {
-  category: 'CAPTCHA',
+  category: 'LOGIN',
 }
 // 查询列表数据
 const getDataList = async () => {
-  loading.value = true
-  const {data} = await listOption(queryForm)
-  captchaSetting.value = data.reduce((obj: CaptchaSetting, option: OptionResp) => {
-    obj[option.code] = {...option, value: Number.parseInt(option.value)}
-    return obj
-  }, {})
-
-  handleCancel()
-  loading.value = false
+  try {
+    loading.value = true
+    const { data } = await listOption(queryForm)
+    loginConfig.value = data.reduce((obj: LoginConfig, option: OptionResp) => {
+      obj[option.code] = { ...option, value: Number.parseInt(option.value) }
+      return obj
+    }, {})
+    handleCancel()
+  } finally {
+    loading.value = false
+  }
 }
 
 // 保存
 const handleSave = async () => {
   const isInvalid = await formRef.value?.validate()
   if (isInvalid) return false
   await updateOption(
-      Object.entries(form).map(([key, value]) => {
-        return {id: captchaSetting.value[key].id, code: key, value}
-      }),
+    Object.entries(form).map(([key, value]) => {
+      return { id: loginConfig.value[key].id, code: key, value }
+    }),
   )
   await getDataList()
   Message.success('保存成功')
@@ -128,7 +125,7 @@ const handleResetValue = async () => {
 const onResetValue = () => {
   Modal.warning({
     title: '警告',
-    content: '确认恢复安全配置为默认值吗？',
+    content: '确认恢复登录配置为默认值吗？',
     hideCancel: false,
     maskClosable: false,
     onOk: handleResetValue,