refactor: vue3 axios api ...

yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue

@@ -12,8 +12,8 @@ import {
   ElDivider
 } from 'element-plus'
 import { reactive, ref, unref, onMounted, computed, watch } from 'vue'
-import { getCodeImgApi, getTenantIdByNameApi, loginApi, getAsyncRoutesApi } from '@/api/login'
-import { setToken } from '@/utils/auth'
+import * as LoginApi from '@/api/login'
+import { setToken, setTenantId } from '@/utils/auth'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { useCache } from '@/hooks/web/useCache'
 import { usePermissionStore } from '@/store/modules/permission'
@@ -68,14 +68,14 @@ const loginData = reactive({
 
 // 获取验证码
 const getCode = async () => {
-  const res = await getCodeImgApi()
+  const res = await LoginApi.getCodeImgApi()
   loginData.codeImg = 'data:image/gif;base64,' + res.img
   loginData.loginForm.uuid = res.uuid
 }
 //获取租户ID
 const getTenantId = async () => {
-  const res = await getTenantIdByNameApi(loginData.loginForm.tenantName)
-  wsCache.set('tenantId', res)
+  const res = await LoginApi.getTenantIdByNameApi(loginData.loginForm.tenantName)
+  setTenantId(res)
 }
 // 登录
 const handleLogin = async () => {
@@ -83,10 +83,11 @@ const handleLogin = async () => {
   const data = await validForm()
   if (!data) return
   loginLoading.value = true
-  await loginApi(loginData.loginForm)
+  await LoginApi.loginApi(loginData.loginForm)
     .then(async (res) => {
       setToken(res)
-      await userStore.getUserInfoAction()
+      const userInfo = await LoginApi.getInfoApi()
+      await userStore.getUserInfoAction(userInfo)
       await getRoutes()
     })
     .catch(() => {
@@ -100,9 +101,9 @@ const handleLogin = async () => {
 // 获取路由
 const getRoutes = async () => {
   // 后端过滤菜单
-  const routers = await getAsyncRoutesApi()
-  wsCache.set('roleRouters', routers)
-  await permissionStore.generateRoutes(routers).catch(() => {})
+  const res = await LoginApi.getAsyncRoutesApi()
+  wsCache.set('roleRouters', res)
+  await permissionStore.generateRoutes(res).catch(() => {})
   permissionStore.getAddRouters.forEach((route) => {
     addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
   })

yudao-ui-admin-vue3/src/views/Login/components/MobileForm.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { useIcon } from '@/hooks/web/useIcon'
-import { reactive, ref, unref, watch, onMounted, computed } from 'vue'
+import { reactive, ref, unref, watch, computed } from 'vue'
 import LoginFormTitle from './LoginFormTitle.vue'
 import { ElForm, ElFormItem, ElInput, ElRow, ElCol, ElMessage } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
 import { required } from '@/utils/formRules'
 import {
   getTenantIdByNameApi,
-  getCodeImgApi,
   getAsyncRoutesApi,
   sendSmsCodeApi,
-  smsLoginApi
+  smsLoginApi,
+  getInfoApi
 } from '@/api/login'
 import { useCache } from '@/hooks/web/useCache'
 import { usePermissionStore } from '@/store/modules/permission'
@@ -98,12 +98,6 @@ watch(
     immediate: true
   }
 )
-// 获取验证码 TODO @jinz：是不是可以去掉？手机这里暂时不用验证码
-const getCode = async () => {
-  const res = await getCodeImgApi()
-  loginData.codeImg = 'data:image/gif;base64,' + res.img
-  loginData.loginForm.uuid = res.uuid
-}
 // 获取租户 ID
 const getTenantId = async () => {
   const res = await getTenantIdByNameApi(loginData.loginForm.tenantName)
@@ -120,7 +114,8 @@ const signIn = async () => {
   await smsLoginApi(smsVO.loginSms)
     .then(async (res) => {
       setToken(res?.token)
-      await userStore.getUserInfoAction()
+      const userInfo = await getInfoApi()
+      await userStore.getUserInfoAction(userInfo)
       getRoutes()
     })
     .catch(() => {})
@@ -141,9 +136,6 @@ const getRoutes = async () => {
   permissionStore.setIsAddRouters(true)
   push({ path: redirect.value || permissionStore.addRouters[0].path })
 }
-onMounted(() => {
-  getCode()
-})
 </script>
 <template>
   <el-form

yudao-ui-admin-vue3/src/views/Login/components/index.ts

@@ -2,4 +2,4 @@ import LoginForm from './LoginForm.vue'
 import MobileForm from './MobileForm.vue'
 import LoginFormTitle from './LoginFormTitle.vue'
 
-export {LoginForm, MobileForm, LoginFormTitle}
+export { LoginForm, MobileForm, LoginFormTitle }

yudao-ui-admin-vue3/src/views/Login/components/useLogin.ts

@@ -1,5 +1,4 @@
 import { ref, computed, unref, Ref } from 'vue'
-import { useI18n } from '@/hooks/web/useI18n'
 
 export enum LoginStateEnum {
   LOGIN,
@@ -40,72 +39,3 @@ export function useFormValid<T extends Object = any>(formRef: Ref<any>) {
     validForm
   }
 }
-
-  const getFormRules = computed(
-    (): {
-      [k: string]: ValidationRule | ValidationRule[]
-    } => {
-      const accountFormRule = unref(getAccountFormRule)
-      const passwordFormRule = unref(getPasswordFormRule)
-      const smsFormRule = unref(getSmsFormRule)
-      const mobileFormRule = unref(getMobileFormRule)
-
-      const mobileRule = {
-        sms: smsFormRule,
-        mobile: mobileFormRule
-      }
-      switch (unref(currentState)) {
-        // register form rules
-        case LoginStateEnum.REGISTER:
-          return {
-            account: accountFormRule,
-            password: passwordFormRule,
-            confirmPassword: [
-              {
-                validator: validateConfirmPassword(formData?.password),
-                trigger: 'change'
-              }
-            ],
-            policy: [
-              {
-                validator: validatePolicy,
-                trigger: 'change'
-              }
-            ],
-            ...mobileRule
-          }
-
-        // reset password form rules
-        case LoginStateEnum.RESET_PASSWORD:
-          return {
-            account: accountFormRule,
-            ...mobileRule
-          }
-
-        // mobile form rules
-        case LoginStateEnum.MOBILE:
-          return mobileRule
-
-        // login form rules
-        default:
-          return {
-            account: accountFormRule,
-            password: passwordFormRule
-          }
-      }
-    }
-  )
-  return {
-    getFormRules
-  }
-}
-
-function createRule(message: string) {
-  return [
-    {
-      required: true,
-      message,
-      trigger: 'change'
-    }
-  ]
-}