refactor: vue3 axios api ...

This commit is contained in:
xingyu
2022-07-19 22:33:54 +08:00
parent ba96eef51a
commit 9e2e220b69
121 changed files with 1022 additions and 9700 deletions

View File

@ -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) // 动态添加可访问路由表
})

View File

@ -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

View File

@ -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 }

View File

@ -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'
}
]
}