feat: 使用getConfig接口来获取系统配置

src/api/common.ts

@@ -1,14 +1,17 @@
 import { http } from "@/utils/http";
 
 export type CaptchaDTO = {
-  /** 验证码开关 */
-  isCaptchaOn: boolean;
   /**  验证码的base64图片 */
   captchaCodeImg: string;
   /** 验证码对应的缓存key */
   captchaCodeKey: string;
 };
 
+export type ConfigDTO = {
+  /** 验证码开关 */
+  isCaptchaOn: boolean;
+};
+
 export type LoginByPasswordDTO = {
   /** 用户名 */
   username: string;
@@ -32,6 +35,11 @@ export type RefreshTokenResult = {
   };
 };
 
+/** 获取系统配置接口 */
+export const getConfig = () => {
+  return http.request<ResponseData<ConfigDTO>>("get", "/getConfig");
+};
+
 /** 验证码接口 */
 export const getCaptchaCode = () => {
   return http.request<ResponseData<CaptchaDTO>>("get", "/captchaImage");

src/views/login/index.vue

@@ -48,6 +48,7 @@ defineOptions({
 
 // TODO 当请求验证码过于频繁的话  服务器会报错  但是前端没有反应 这块需要处理一下, 通过axios处理一下
 const captchaCodeBase64 = ref("");
+
 const isCaptchaOn = ref(false);
 
 const router = useRouter();
@@ -116,10 +117,8 @@ function onkeypress({ code }: KeyboardEvent) {
 
 async function getCaptchaCode() {
   await CommonAPI.getCaptchaCode().then(res => {
-    isCaptchaOn.value = res.data.isCaptchaOn;
     captchaCodeBase64.value = `data:image/gif;base64,${res.data.captchaCodeImg}`;
     ruleForm.captchaCodeKey = res.data.captchaCodeKey;
-    console.log(ruleForm);
   });
 }
 
@@ -130,8 +129,15 @@ watch(isRememberMe, newVal => {
   }
 });
 
-onBeforeMount(() => {
+onBeforeMount(async () => {
-  getCaptchaCode();
+  await CommonAPI.getConfig().then(res => {
+    isCaptchaOn.value = res.data.isCaptchaOn;
+  });
+
+  if (isCaptchaOn.value) {
+    getCaptchaCode();
+  }
+
   isRememberMe.value = getIsRememberMe();
   if (isRememberMe.value) {
     ruleForm.password = getPassword();
@@ -140,7 +146,6 @@ onBeforeMount(() => {
 
 onMounted(() => {
   window.document.addEventListener("keypress", onkeypress);
-  getCaptchaCode();
 });
 
 onBeforeUnmount(() => {