refactor🎨: 增加验证码功能

Author: matevip

.env

@@ -0,0 +1,8 @@
+# port
+VITE_PORT = 3100
+
+# spa-title
+VITE_GLOB_APP_TITLE = Artemis Admin
+
+# spa shortname
+VITE_GLOB_APP_SHORT_NAME = artemis_admin

.env.development

@@ -6,14 +6,15 @@ VITE_PUBLIC_PATH = /
 
 # Cross-domain proxy, you can configure multiple
 # Please note that no line breaks
-VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]]
+# VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]]
+VITE_PROXY = [["/api","http://localhost:10001"],["/upload","http://localhost:3300/upload"]]
 # VITE_PROXY=[["/api","https://vvbin.cn/test"]]
 
 # Delete console
 VITE_DROP_CONSOLE = false
 
 # Basic interface address SPA
-VITE_GLOB_API_URL=/basic-api
+VITE_GLOB_API_URL=/api
 
 # File upload address， optional
 VITE_GLOB_UPLOAD_URL=/upload

.gitpod.yml

@@ -0,0 +1,6 @@
+ports:
+  - port: 3344
+    onOpen: open-preview
+tasks:
+  - init: yarn
+    command: yarn dev

.yarnclean

@@ -0,0 +1,48 @@
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+assets
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+appveyor.yml
+circle.yml
+codeship-services.yml
+codeship-steps.yml
+wercker.yml
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.travis.yml
+
+# misc
+*.md
+
+!istanbul-reports/lib/html/assets
+!istanbul-api/node_modules/istanbul-reports/lib/html/assets

public/favicon.ico

@@ -36,3 +36,10 @@ export interface GetUserInfoModel {
   // 介绍
   desc?: string;
 }
+
+export interface GetCaptchaModel {
+  // 验证码地址
+  codeUrl: string;
+  // 惟一key
+  key: string;
+}

public/resource/img/logo.png

@@ -1,5 +1,10 @@
 import { defHttp } from '/@/utils/http/axios';
-import { LoginParams, LoginResultModel, GetUserInfoModel } from './model/userModel';
+import {
+  LoginParams,
+  LoginResultModel,
+  GetUserInfoModel,
+  GetCaptchaModel,
+} from './model/userModel';
 
 import { ErrorMessageMode } from '/#/axios';
 
@@ -8,6 +13,7 @@ enum Api {
   Logout = '/logout',
   GetUserInfo = '/getUserInfo',
   GetPermCode = '/getPermCode',
+  GetCaptcha = '/mate-uaa/auth/code',
 }
 
 /**
@@ -39,3 +45,7 @@ export function getPermCode() {
 export function doLogout() {
   return defHttp.get({ url: Api.Logout });
 }
+
+export function getCaptcha() {
+  return defHttp.get<GetCaptchaModel>({ url: Api.GetCaptcha });
+}

src/api/sys/model/userModel.ts

@@ -2,8 +2,8 @@
  * @description: Request result set
  */
 export enum ResultEnum {
-  SUCCESS = 0,
-  ERROR = 1,
+  SUCCESS = 200,
+  ERROR = 500,
   TIMEOUT = 401,
   TYPE = 'success',
 }

src/api/sys/user.ts

@@ -100,5 +100,6 @@ export default {
     email: 'Email',
     smsCode: 'SMS code',
     mobile: 'Mobile',
+    captcha: 'Captcha',
   },
 };

src/assets/images/logo.png

@@ -65,7 +65,7 @@ export default {
     signUpFormTitle: '注册',
     forgetFormTitle: '重置密码',
 
-    signInTitle: '开箱即用的中后台管理系统',
+    signInTitle: '迈特云，您的微服务管家',
     signInDesc: '输入您的个人详细信息开始使用！',
     policy: '我同意xxx隐私政策',
     scanSign: `扫码后点击"确认"，即可完成登录`,
@@ -94,5 +94,6 @@ export default {
     email: '邮箱',
     smsCode: '短信验证码',
     mobile: '手机号码',
+    captcha: '验证码',
   },
 };

src/enums/httpEnum.ts

@@ -1,5 +1,5 @@
 import type { AxiosRequestConfig, AxiosInstance, AxiosResponse } from 'axios';
-import type { RequestOptions, Result, UploadFileParams } from '../../../../types/axios';
+import type { RequestOptions, Data, UploadFileParams } from '../../../../types/axios';
 import type { CreateAxiosOptions } from './axiosTransform';
 import axios from 'axios';
 import qs from 'qs';
@@ -207,8 +207,8 @@ export class VAxios {
 
     return new Promise((resolve, reject) => {
       this.axiosInstance
-        .request<any, AxiosResponse<Result>>(conf)
-        .then((res: AxiosResponse<Result>) => {
+        .request<any, AxiosResponse<Data>>(conf)
+        .then((res: AxiosResponse<Data>) => {
           if (transformRequestHook && isFunction(transformRequestHook)) {
             try {
               const ret = transformRequestHook(res, opt);

src/locales/lang/en/sys.ts

@@ -2,7 +2,7 @@
  * Data processing class, can be configured according to the project
  */
 import type { AxiosRequestConfig, AxiosResponse } from 'axios';
-import type { RequestOptions, Result } from '/#/axios';
+import type { RequestOptions, Data } from '/#/axios';
 
 export interface CreateAxiosOptions extends AxiosRequestConfig {
   authenticationScheme?: string;
@@ -21,7 +21,7 @@ export abstract class AxiosTransform {
   /**
    * @description: Request successfully processed
    */
-  transformRequestHook?: (res: AxiosResponse<Result>, options: RequestOptions) => any;
+  transformRequestHook?: (res: AxiosResponse<Data>, options: RequestOptions) => any;
 
   /**
    * @description: 请求失败处理

src/locales/lang/zh-CN/sys.ts

@@ -2,7 +2,7 @@
 // The axios configuration can be changed according to the project, just change the file, other files can be left unchanged
 
 import type { AxiosResponse } from 'axios';
-import type { RequestOptions, Result } from '/#/axios';
+import type { RequestOptions, Data } from '/#/axios';
 import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform';
 import { VAxios } from './Axios';
 import { checkStatus } from './checkStatus';
@@ -27,7 +27,7 @@ const transform: AxiosTransform = {
   /**
    * @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
    */
-  transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
+  transformRequestHook: (res: AxiosResponse<Data>, options: RequestOptions) => {
     const { t } = useI18n();
     const { isTransformResponse, isReturnNativeResponse } = options;
     // 是否返回原生响应头 比如：需要获取响应头时使用该属性
@@ -47,24 +47,24 @@ const transform: AxiosTransform = {
       throw new Error(t('sys.api.apiRequestFailed'));
     }
     //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
-    const { code, result, message } = data;
+    // const { code, result, msg } = data;
 
     // 这里逻辑可以根据项目进行修改
-    const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS;
+    const hasSuccess = data && Reflect.has(data, 'code') && data.code === ResultEnum.SUCCESS;
     if (hasSuccess) {
-      return result;
+      return data.data;
     }
 
     // 在此处根据自己项目的实际情况对不同的code执行不同的操作
     // 如果不希望中断当前请求，请return数据，否则直接抛出异常即可
     let timeoutMsg = '';
-    switch (code) {
+    switch (data.code) {
       case ResultEnum.TIMEOUT:
         timeoutMsg = t('sys.api.timeoutMessage');
         break;
       default:
-        if (message) {
-          timeoutMsg = message;
+        if (data.msg) {
+          timeoutMsg = data.msg;
         }
     }
 

src/utils/http/axios/Axios.ts

@@ -8,6 +8,9 @@
     v-show="getShow"
     @keypress.enter="handleLogin"
   >
+    <FormItem name="key">
+      <Input size="large" v-model:value="formData.key" :hidden="true" />
+    </FormItem>
     <FormItem name="account" class="enter-x">
       <Input
         size="large"
@@ -24,6 +27,16 @@
         :placeholder="t('sys.login.password')"
       />
     </FormItem>
+    <ARow class="enter-x">
+      <ACol :span="16">
+        <FormItem name="code">
+          <Input size="large" :placeholder="t('sys.login.captcha')" />
+        </FormItem>
+      </ACol>
+      <ACol :span="8">
+        <img :src="codeUrl" @click="getCode" />
+      </ACol>
+    </ARow>
 
     <ARow class="enter-x">
       <ACol :span="12">
@@ -82,7 +95,7 @@
   </Form>
 </template>
 <script lang="ts" setup>
-  import { reactive, ref, toRaw, unref, computed } from 'vue';
+  import { reactive, ref, toRaw, unref, computed, onMounted } from 'vue';
 
   import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue';
   import {
@@ -100,6 +113,7 @@
   import { useUserStore } from '/@/store/modules/user';
   import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
   import { useDesign } from '/@/hooks/web/useDesign';
+  import { getCaptcha } from '/@/api/sys/user';
   //import { onKeyStroke } from '@vueuse/core';
 
   const ACol = Col;
@@ -117,18 +131,30 @@
   const formRef = ref();
   const loading = ref(false);
   const rememberMe = ref(false);
+  const codeUrl = ref();
 
   const formData = reactive({
-    account: 'vben',
-    password: '123456',
+    account: 'admin',
+    password: 'matecloud',
+    key: '',
   });
 
   const { validForm } = useFormValid(formRef);
 
+  onMounted(() => {
+    getCode();
+  });
+
   //onKeyStroke('Enter', handleLogin);
 
   const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
 
+  async function getCode() {
+    const codeModel = await getCaptcha();
+    codeUrl.value = codeModel.codeUrl;
+    formData.key = codeModel.key;
+  }
+
   async function handleLogin() {
     const data = await validForm();
     if (!data) return;

src/utils/http/axios/axiosTransform.ts

@@ -30,6 +30,13 @@ export interface Result<T = any> {
   result: T;
 }
 
+export interface Data<T = any> {
+  code: number;
+  msg: string;
+  time: string;
+  data: T;
+}
+
 // multipart/form-data: upload file
 export interface UploadFileParams {
   // Other parameters