feat: 登录接口和验证码登录

src/api/login.ts

@@ -3,7 +3,7 @@ import { request } from '@/plugins/http-fetch';
 // 登录方法
 export function login(data: Record<string, string>) {
   return request({
-    url: '/securityManagement/v1/oauth/token',
+    url: '/securityManagement/v1/login',
     method: 'post',
     data: data,
     whithToken: false,
@@ -52,7 +52,7 @@ export function logout() {
  */
 export function getCaptchaImage() {
   return request({
-    url: '/captchaImage',
+    url: '/securityManagement/v1/captchaImage',
     method: 'get',
     whithToken: false,
   });

src/views/login.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { GlobalFooter } from '@ant-design-vue/pro-layout';
 import { message } from 'ant-design-vue/lib';
-import { reactive } from 'vue';
+import { reactive, onMounted } from 'vue';
 import useUserStore from '@/store/modules/user';
-import useI18n from '@/hooks/useI18n';
-import { regExpMobile } from '@/utils/regular-utils';
+import { getCaptchaImage } from '@/api/login';
 import { useRouter, useRoute } from 'vue-router';
+import useI18n from '@/hooks/useI18n';
+import { toRaw } from 'vue';
 const { t, changeLocale } = useI18n();
 const router = useRouter();
 const route = useRoute();
@@ -21,24 +22,37 @@ let state = reactive({
     username: 'admin',
     /**密码 */
     password: 'rootaa',
+    /**验证码 */
+    code: '',
+    /**验证码uuid */
+    uuid: '',
   },
   /**表单提交点击状态 */
   fromClick: false,
+  /**验证码状态 */
+  captcha: {
+    /**验证码开关 */
+    enabled: false,
+    /**验证码图片地址 */
+    codeImg: '',
+  },
+  /**验证码点击状态 */
+  captchaClick: false,
 });
 
 /**表单验证通过 */
 function fnFinish() {
   state.fromClick = true;
   // 账号密码登录
-  let form = {
-    userName: state.from.username,
-    value: state.from.password,
-    grantType: 'password',
-  };
+  // let form = {
+  //   userName: state.from.username,
+  //   value: state.from.password,
+  //   grantType: 'password',
+  // };
 
   // 发送请求
   useUserStore()
-    .fnLogin(form)
+    .fnLogin(toRaw(state.from))
     .then(res => {
       if (res.code === 1) {
         message.success(t('views.login.loginSuccess'), 3);
@@ -49,9 +63,38 @@ function fnFinish() {
     })
     .finally(() => {
       state.fromClick = false;
+      // 刷新验证码
+      if (state.captcha.enabled) {
+        state.from.code = '';
+        fnGetCaptcha();
+      }
     });
 }
 
+/**
+ * 获取验证码
+ */
+function fnGetCaptcha() {
+  if (state.captchaClick) return;
+  state.captchaClick = true;
+  getCaptchaImage().then(res => {
+    state.captchaClick = false;
+    if (res.code != 1) {
+      message.warning(`${res.msg}`, 3);
+      return;
+    }
+    state.captcha.enabled = Boolean(res.captchaEnabled);
+    if (state.captcha.enabled) {
+      state.captcha.codeImg = res.img;
+      state.from.uuid = res.uuid;
+    }
+  });
+}
+
+onMounted(() => {
+  fnGetCaptcha();
+});
+
 /**改变多语言 */
 function fnChangeLocale(e: any) {
   changeLocale(e.key);
@@ -118,6 +161,43 @@ function fnChangeLocale(e: any) {
           </a-input-password>
         </a-form-item>
 
+        <a-row :gutter="8" v-if="state.captcha.enabled">
+          <a-col :span="16">
+            <a-form-item
+              name="code"
+              :rules="[
+                {
+                  required: true,
+                  min: 1,
+                  message: t('valid.codePlease'),
+                },
+              ]"
+            >
+              <a-input
+                v-model:value="state.from.code"
+                size="large"
+                :placeholder="t('valid.codeHit')"
+                :maxlength="6"
+              >
+                <template #prefix>
+                  <RobotOutlined class="prefix-icon" />
+                </template>
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-image
+              :alt="t('valid.codeHit')"
+              style="cursor: pointer; border-radius: 2px"
+              width="120px"
+              height="40px"
+              :preview="false"
+              :src="state.captcha.codeImg"
+              @click="fnGetCaptcha"
+            />
+          </a-col>
+        </a-row>
+
         <a-row
           :gutter="8"
           justify="space-between"