新增验证码登录功能

admin/src/api/user.ts

@@ -6,6 +6,11 @@ export function login(params: Record<string, any>) {
     return request.post({ url: '/system/login', params: { ...params, terminal: config.terminal } })
 }
 
+// 登录
+export function loginCaptcha() {
+    return request.get({ url: '/system/captcha' })
+}
+
 // 退出登录
 export function logout() {
     return request.post({ url: '/system/logout' })

admin/src/enums/requestEnums.ts

@@ -22,6 +22,7 @@ export enum RequestCodeEnum {
     LOGIN_DISABLE_ERROR = 331, //登陆账号已被禁用
     TOKEN_EMPTY = 332, // TOKEN参数为空
     TOKEN_INVALID = 333, // TOKEN参数无效
+    VERIFICATION_CODE_ERROR = 334, // 验证码错误
     NO_PERMISSTION = 403, //无相关权限
     REQUEST_404_ERROR = 404, //请求接口不存在
     SYSTEM_ERROR = 500 //系统错误

admin/src/stores/modules/user.ts

@@ -34,11 +34,13 @@ const useUserStore = defineStore({
             this.perms = []
         },
         login(playload: any) {
-            const { account, password } = playload
+            const { account, password, code, uuid } = playload
             return new Promise((resolve, reject) => {
                 login({
                     username: account,
-                    password: password
+                    password,
+                    code,
+                    uuid
                 })
                     .then((data) => {
                         this.token = data.token

admin/src/utils/request/index.ts

@@ -69,6 +69,7 @@ const axiosHooks: AxiosHooks = {
             case RequestCodeEnum.NO_PERMISSTION:
             case RequestCodeEnum.FAILED:
             case RequestCodeEnum.SYSTEM_ERROR:
+            case RequestCodeEnum.VERIFICATION_CODE_ERROR:
                 msg && feedback.msgError(msg)
                 return Promise.reject(data)
 

admin/src/views/account/login.vue

@@ -34,6 +34,25 @@
                                 </template>
                             </el-input>
                         </el-form-item>
+                        <el-form-item prop="code">
+                            <div class="flex items-center">
+                                <el-input
+                                    v-model="formData.code"
+                                    placeholder="请输入验证码"
+                                    @keyup.enter="handleLogin"
+                                >
+                                    <template #prepend>
+                                        <icon name="local-icon-anquan" />
+                                    </template>
+                                </el-input>
+                                <div
+                                    class="ml-4 w-[100px] flex-none cursor-pointer"
+                                    @click="getLoginCaptcha"
+                                >
+                                    <img class="w-full" :src="codeImg" alt="" />
+                                </div>
+                            </div>
+                        </el-form-item>
                     </el-form>
                     <div class="mb-5">
                         <el-checkbox v-model="remAccount" label="记住账号"></el-checkbox>
@@ -58,6 +77,7 @@ import cache from '@/utils/cache'
 import { ACCOUNT_KEY } from '@/enums/cacheEnums'
 import { PageEnum } from '@/enums/pageEnum'
 import { useLockFn } from '@/hooks/useLockFn'
+import { loginCaptcha } from '@/api/user'
 const passwordRef = shallowRef<InputInstance>()
 const formRef = shallowRef<FormInstance>()
 const appStore = useAppStore()
@@ -66,9 +86,12 @@ const route = useRoute()
 const router = useRouter()
 const remAccount = ref(false)
 const config = computed(() => appStore.config)
+const codeImg = ref()
 const formData = reactive({
     account: '',
-    password: ''
+    password: '',
+    code: '',
+    uuid: ''
 })
 const rules = {
     account: [
@@ -84,8 +107,21 @@ const rules = {
             message: '请输入密码',
             trigger: ['blur']
         }
+    ],
+    code: [
+        {
+            required: true,
+            message: '请输入验证码',
+            trigger: ['blur']
+        }
     ]
 }
+
+const getLoginCaptcha = async () => {
+    const data = await loginCaptcha()
+    formData.uuid = data.uuid
+    codeImg.value = data.img
+}
 // 回车按键监听
 const handleEnter = () => {
     if (!formData.password) {
@@ -101,7 +137,11 @@ const handleLogin = async () => {
         remember: remAccount.value,
         account: remAccount.value ? formData.account : ''
     })
-    await userStore.login(formData)
+    try {
+        await userStore.login(formData)
+    } catch (error) {
+        getLoginCaptcha()
+    }
     const {
         query: { redirect }
     } = route
@@ -112,6 +152,7 @@ const { isLock, lockFn: lockLogin } = useLockFn(handleLogin)
 
 onMounted(() => {
     const value = cache.get(ACCOUNT_KEY)
+    getLoginCaptcha()
     if (value?.remember) {
         remAccount.value = value.remember
         formData.account = value.account
@@ -125,6 +166,9 @@ onMounted(() => {
     @apply min-h-screen bg-no-repeat bg-center bg-cover;
     .login-card {
         height: 400px;
+        :deep(.el-input-group__prepend) {
+            padding: 0 15px;
+        }
     }
 }
 </style>