perf: perf axios config

src/api-types/user.ts

@@ -3,5 +3,7 @@ export interface IUserModel {
   password: string
   check_password: string
   is_admin: number
-  code: string | number
+  code?: string | number
+  token?: string
+  refreshToken?: string
 }

src/api/login/index.ts

@@ -1,13 +1,15 @@
 import { useAxios } from '@/hooks/web/useAxios'
-import type { UserLoginType, UserType } from './types'
+import type { UserType } from './types'
+import { IUserModel } from '@/api-types/user'
 
 const request = useAxios()
 
-export const loginApi = (data: UserLoginType) => {
-  return request.post({
+export const loginApi = async (data: Pick<IUserModel, 'user_name' | 'password'>) => {
+  const res = await request.post<IResponse<IUserModel>>({
     url: '/user/login',
     data
   })
+  return res && res.data
 }
 
 export const loginOutApi = () => {

src/api/register/index.ts

@@ -8,12 +8,14 @@ interface ICodeModel {
   uuid: string
 }
 
-export const getCodeApi = async () => {
-  const res = await request.get<IResponse<ICodeModel>>({ url: 'user/captcha' })
+export const getCodeApi = async (): Promise<IResponse<ICodeModel>> => {
+  const res = await request.get({ url: 'user/captcha' })
   return res && res.data
 }
 
-export const registerApi = async (data: Omit<IUserModel, 'is_admin'>) => {
-  const res = await request.post<IResponse<IUserModel>>({ url: 'user/register', data })
+export const registerApi = async (
+  data: Omit<IUserModel, 'is_admin'>
+): Promise<IResponse<IUserModel>> => {
+  const res = await request.post({ url: 'user/register', data })
   return res && res.data
 }

src/views/Login/components/LoginForm.vue

@@ -6,12 +6,14 @@ import { ElButton, ElCheckbox, ElLink } from 'element-plus'
 import { required } from '@/utils/formRules'
 import { useForm } from '@/hooks/web/useForm'
 import { loginApi, getTestRoleApi, getAdminRoleApi } from '@/api/login'
-import type { UserLoginType } from '@/api/login/types'
 import { useCache } from '@/hooks/web/useCache'
 import { useAppStore } from '@/store/modules/app'
 import { usePermissionStore } from '@/store/modules/permission'
 import { useRouter } from 'vue-router'
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
+import { IUserModel } from '@/api-types/user'
+import md5 from 'js-md5'
+import { cloneDeep } from 'lodash-es'
 
 const emit = defineEmits(['to-register'])
 
@@ -21,10 +23,12 @@ const permissionStore = usePermissionStore()
 
 const { currentRoute, addRoute, push } = useRouter()
 
+const { wsCache } = useCache()
+
 const { t } = useI18n()
 
 const rules = {
-  username: [required],
+  user_name: [required],
   password: [required]
 }
 
@@ -36,7 +40,7 @@ const schema = reactive<FormSchema[]>([
     }
   },
   {
-    field: 'username',
+    field: 'user_name',
     label: t('login.username'),
     value: 'admin',
     component: 'Input',
@@ -119,17 +123,21 @@ const signIn = async () => {
     if (isValid) {
       loading.value = true
       const { getFormData } = methods
-      const formData = await getFormData<UserLoginType>()
-
-      const res = await loginApi(formData)
-        .catch(() => {})
-        .finally(() => (loading.value = false))
-
-      if (res) {
-        const { wsCache } = useCache()
-        wsCache.set(appStore.getUserInfo, res.data)
-
-        getRole()
+      const formData = await getFormData<IUserModel>()
+
+      try {
+        const { result } = await loginApi(
+          Object.assign(cloneDeep(formData), {
+            password: md5(formData.password)
+          })
+        )
+
+        if (result) {
+          wsCache.set(appStore.getUserInfo, result)
+          getRole()
+        }
+      } finally {
+        loading.value = false
       }
     }
   })
@@ -138,22 +146,22 @@ const signIn = async () => {
 // 获取角色信息
 const getRole = async () => {
   const { getFormData } = methods
-  const formData = await getFormData<UserLoginType>()
+  const formData = await getFormData<IUserModel>()
   const params = {
-    roleName: formData.username
+    roleName: formData.user_name
   }
   // admin - 模拟后端过滤菜单
   // test - 模拟前端过滤菜单
   const res =
-    formData.username === 'admin'
+    formData.user_name === 'admin'
       ? await getAdminRoleApi({ params })
       : await getTestRoleApi({ params })
   if (res) {
     const { wsCache } = useCache()
     const routers = res.data.list || []
     wsCache.set('roleRouters', routers)
 
-    formData.username === 'admin'
+    formData.user_name === 'admin'
       ? await permissionStore.generateRoutes('admin', routers).catch(() => {})
       : await permissionStore.generateRoutes('test', routers).catch(() => {})
 

src/views/Login/components/RegisterForm.vue

@@ -134,9 +134,9 @@ const toLogin = () => {
 const codeUrl = ref('')
 const codeUuid = ref('')
 const getCode = async () => {
-  const res = await getCodeApi()
-  if (res) {
-    const { url, uuid } = res.result
+  const { result } = await getCodeApi()
+  if (result) {
+    const { url, uuid } = result
     codeUrl.value = url
     codeUuid.value = uuid
   }
@@ -152,14 +152,14 @@ const loginRegister = async () => {
       try {
         loading.value = true
         const formData = await getFormData<Omit<IUserModel, 'is_admin'>>()
-        const res = await registerApi(
+        const { result } = await registerApi(
           Object.assign(cloneDeep(formData), {
             uuid: codeUuid.value,
             password: md5(formData.password),
             check_password: md5(formData.check_password)
           })
         )
-        if (res) {
+        if (result) {
           ElMessage.success('注册成功')
           toLogin()
         }
@@ -187,8 +187,12 @@ const loginRegister = async () => {
 
     <template #code="form">
       <div class="w-[100%] flex">
-        <ElInput v-model="form['code']" :placeholder="t('login.codePlaceholder')" class="flex-2" />
-        <div v-html="codeUrl" class="h-38px flex-1 cursor-pointer w-150px" @click="getCode"></div>
+        <ElInput
+          v-model="form['code']"
+          :placeholder="t('login.codePlaceholder')"
+          class="!w-[calc(100%-150px)]"
+        />
+        <div v-html="codeUrl" class="h-38px cursor-pointer w-150px" @click="getCode"></div>
       </div>
     </template>