Commit 3e8d83a41e70f6ef4d9e1a432d8578278bd2cbf9
1 parent
c804ebad
refactor：login
Showing
7 changed files
with
12 additions
and
326 deletions
yudao-ui-admin-vue3/src/config/axios/index.ts
| @@ -56,11 +56,6 @@ const transform: AxiosTransform = { | @@ -56,11 +56,6 @@ const transform: AxiosTransform = { | ||
| 56 | // 这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式 | 56 | // 这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式 |
| 57 | const { code, msg } = data | 57 | const { code, msg } = data |
| 58 | const result = data.data | 58 | const result = data.data |
| 59 | - // TODO 输出res 方便调试，完成后删除 | ||
| 60 | - // console.info('data') | ||
| 61 | - // console.info(data) | ||
| 62 | - // console.info('result') | ||
| 63 | - // console.info(result) | ||
| 64 | // TODO 芋艿：文件下载，需要特殊处理 | 59 | // TODO 芋艿：文件下载，需要特殊处理 |
| 65 | if (code === undefined) { | 60 | if (code === undefined) { |
| 66 | console.log(res) | 61 | console.log(res) |
yudao-ui-admin-vue3/src/store/modules/user.ts
| @@ -27,7 +27,6 @@ export const useUserStore = defineStore({ | @@ -27,7 +27,6 @@ export const useUserStore = defineStore({ | ||
| 27 | } | 27 | } |
| 28 | }), | 28 | }), |
| 29 | actions: { | 29 | actions: { |
| 30 | - // TODO 设置store刷新页面就消失 | ||
| 31 | async getUserInfoAction() { | 30 | async getUserInfoAction() { |
| 32 | if (!getAccessToken()) { | 31 | if (!getAccessToken()) { |
| 33 | this.resetState() | 32 | this.resetState() |
yudao-ui-admin-vue3/src/views/Login/components/LoginFormOld.vue deleted
| 1 | -<script setup lang="ts"> | ||
| 2 | -import { reactive, ref, unref, watch, onMounted } from 'vue' | ||
| 3 | -import { Form } from '@/components/Form' | ||
| 4 | -import { useI18n } from '@/hooks/web/useI18n' | ||
| 5 | -import { ElCheckbox, ElLink } from 'element-plus' | ||
| 6 | -import { required } from '@/utils/formRules' | ||
| 7 | -import { useForm } from '@/hooks/web/useForm' | ||
| 8 | -import { getTenantIdByNameApi, getCodeImgApi, loginApi, getAsyncRoutesApi } from '@/api/login' | ||
| 9 | -import { useCache } from '@/hooks/web/useCache' | ||
| 10 | -import { usePermissionStore } from '@/store/modules/permission' | ||
| 11 | -import { useRouter } from 'vue-router' | ||
| 12 | -import { setToken } from '@/utils/auth' | ||
| 13 | -import { useUserStoreWithOut } from '@/store/modules/user' | ||
| 14 | -import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router' | ||
| 15 | -import { UserLoginVO } from '@/api/login/types' | ||
| 16 | - | ||
| 17 | -const { wsCache } = useCache() | ||
| 18 | - | ||
| 19 | -const userStore = useUserStoreWithOut() | ||
| 20 | - | ||
| 21 | -const permissionStore = usePermissionStore() | ||
| 22 | - | ||
| 23 | -const { currentRoute, addRoute, push } = useRouter() | ||
| 24 | - | ||
| 25 | -const { t } = useI18n() | ||
| 26 | - | ||
| 27 | -const rules = { | ||
| 28 | - tenantName: [required], | ||
| 29 | - username: [required], | ||
| 30 | - password: [required], | ||
| 31 | - code: [required] | ||
| 32 | -} | ||
| 33 | -const loginData = reactive({ | ||
| 34 | - codeImg: '', | ||
| 35 | - isShowPassword: false, | ||
| 36 | - captchaEnable: true, | ||
| 37 | - tenantEnable: true, | ||
| 38 | - token: '', | ||
| 39 | - loading: { | ||
| 40 | - signIn: false | ||
| 41 | - }, | ||
| 42 | - loginForm: { | ||
| 43 | - tenantName: '芋道源码', | ||
| 44 | - username: 'admin', | ||
| 45 | - password: 'admin123', | ||
| 46 | - code: '', | ||
| 47 | - uuid: '' | ||
| 48 | - } | ||
| 49 | -}) | ||
| 50 | -const schema = reactive<FormSchema[]>([ | ||
| 51 | - { | ||
| 52 | - field: 'title', | ||
| 53 | - colProps: { | ||
| 54 | - span: 24 | ||
| 55 | - } | ||
| 56 | - }, | ||
| 57 | - { | ||
| 58 | - field: 'tenantName', | ||
| 59 | - label: t('login.tenantname'), | ||
| 60 | - value: loginData.loginForm.tenantName, | ||
| 61 | - component: 'Input', | ||
| 62 | - colProps: { | ||
| 63 | - span: 24 | ||
| 64 | - }, | ||
| 65 | - componentProps: { | ||
| 66 | - placeholder: t('login.tenantNamePlaceholder') | ||
| 67 | - } | ||
| 68 | - }, | ||
| 69 | - { | ||
| 70 | - field: 'username', | ||
| 71 | - label: t('login.username'), | ||
| 72 | - value: loginData.loginForm.username, | ||
| 73 | - component: 'Input', | ||
| 74 | - colProps: { | ||
| 75 | - span: 24 | ||
| 76 | - }, | ||
| 77 | - componentProps: { | ||
| 78 | - placeholder: t('login.usernamePlaceholder') | ||
| 79 | - } | ||
| 80 | - }, | ||
| 81 | - { | ||
| 82 | - field: 'password', | ||
| 83 | - label: t('login.password'), | ||
| 84 | - value: loginData.loginForm.password, | ||
| 85 | - component: 'InputPassword', | ||
| 86 | - colProps: { | ||
| 87 | - span: 24 | ||
| 88 | - }, | ||
| 89 | - componentProps: { | ||
| 90 | - style: { | ||
| 91 | - width: '100%' | ||
| 92 | - }, | ||
| 93 | - placeholder: t('login.passwordPlaceholder') | ||
| 94 | - } | ||
| 95 | - }, | ||
| 96 | - { | ||
| 97 | - field: 'code', | ||
| 98 | - label: t('login.code'), | ||
| 99 | - value: loginData.loginForm.code, | ||
| 100 | - component: 'Input', | ||
| 101 | - colProps: { | ||
| 102 | - span: 12 | ||
| 103 | - }, | ||
| 104 | - componentProps: { | ||
| 105 | - style: { | ||
| 106 | - width: '100%' | ||
| 107 | - }, | ||
| 108 | - placeholder: t('login.codePlaceholder') | ||
| 109 | - } | ||
| 110 | - }, | ||
| 111 | - { | ||
| 112 | - field: 'codeImg', | ||
| 113 | - colProps: { | ||
| 114 | - span: 12 | ||
| 115 | - } | ||
| 116 | - }, | ||
| 117 | - { | ||
| 118 | - field: 'tool', | ||
| 119 | - colProps: { | ||
| 120 | - span: 24 | ||
| 121 | - } | ||
| 122 | - }, | ||
| 123 | - { | ||
| 124 | - field: 'login', | ||
| 125 | - colProps: { | ||
| 126 | - span: 24 | ||
| 127 | - } | ||
| 128 | - }, | ||
| 129 | - { | ||
| 130 | - field: 'other', | ||
| 131 | - component: 'Divider', | ||
| 132 | - label: t('login.otherLogin'), | ||
| 133 | - componentProps: { | ||
| 134 | - contentPosition: 'center' | ||
| 135 | - } | ||
| 136 | - }, | ||
| 137 | - { | ||
| 138 | - field: 'otherIcon', | ||
| 139 | - colProps: { | ||
| 140 | - span: 24 | ||
| 141 | - } | ||
| 142 | - } | ||
| 143 | -]) | ||
| 144 | - | ||
| 145 | -const iconSize = 30 | ||
| 146 | -const remember = ref(false) | ||
| 147 | -const { register, elFormRef, methods } = useForm() | ||
| 148 | -const loading = ref(false) | ||
| 149 | -const iconColor = '#999' | ||
| 150 | -const redirect = ref<string>('') | ||
| 151 | - | ||
| 152 | -watch( | ||
| 153 | - () => currentRoute.value, | ||
| 154 | - (route: RouteLocationNormalizedLoaded) => { | ||
| 155 | - redirect.value = route?.query?.redirect as string | ||
| 156 | - }, | ||
| 157 | - { | ||
| 158 | - immediate: true | ||
| 159 | - } | ||
| 160 | -) | ||
| 161 | -// 获取验证码 | ||
| 162 | -const getCode = async () => { | ||
| 163 | - const res = await getCodeImgApi() | ||
| 164 | - loginData.codeImg = 'data:image/gif;base64,' + res.img | ||
| 165 | - loginData.loginForm.uuid = res.uuid | ||
| 166 | -} | ||
| 167 | -//获取租户ID | ||
| 168 | -const getTenantId = async () => { | ||
| 169 | - const res = await getTenantIdByNameApi(loginData.loginForm.tenantName) | ||
| 170 | - wsCache.set('tenantId', res) | ||
| 171 | -} | ||
| 172 | -// 登录 | ||
| 173 | -const signIn = async () => { | ||
| 174 | - await getTenantId() | ||
| 175 | - const formRef = unref(elFormRef) | ||
| 176 | - await formRef?.validate(async (isValid) => { | ||
| 177 | - if (isValid) { | ||
| 178 | - loading.value = true | ||
| 179 | - const { getFormData } = methods | ||
| 180 | - const formData = await getFormData<UserLoginVO>() | ||
| 181 | - formData.uuid = loginData.loginForm.uuid | ||
| 182 | - await loginApi(formData) | ||
| 183 | - .then(async (res) => { | ||
| 184 | - setToken(res) | ||
| 185 | - getRoutes() | ||
| 186 | - await userStore.getUserInfoAction() | ||
| 187 | - }) | ||
| 188 | - .catch(() => { | ||
| 189 | - getCode() | ||
| 190 | - }) | ||
| 191 | - .finally(() => (loading.value = false)) | ||
| 192 | - } | ||
| 193 | - }) | ||
| 194 | -} | ||
| 195 | -// 获取路由 | ||
| 196 | -const getRoutes = async () => { | ||
| 197 | - // 后端过滤菜单 | ||
| 198 | - const routers = await getAsyncRoutesApi() | ||
| 199 | - wsCache.set('roleRouters', routers) | ||
| 200 | - await permissionStore.generateRoutes(routers).catch(() => {}) | ||
| 201 | - permissionStore.getAddRouters.forEach((route) => { | ||
| 202 | - addRoute(route as RouteRecordRaw) // 动态添加可访问路由表 | ||
| 203 | - }) | ||
| 204 | - permissionStore.setIsAddRouters(true) | ||
| 205 | - push({ path: redirect.value || permissionStore.addRouters[0].path }) | ||
| 206 | -} | ||
| 207 | -onMounted(() => { | ||
| 208 | - getCode() | ||
| 209 | -}) | ||
| 210 | -</script> | ||
| 211 | - | ||
| 212 | -<template> | ||
| 213 | - <Form | ||
| 214 | - :schema="schema" | ||
| 215 | - :rules="rules" | ||
| 216 | - label-position="top" | ||
| 217 | - hide-required-asterisk | ||
| 218 | - size="large" | ||
| 219 | - @register="register" | ||
| 220 | - v-show="false" | ||
| 221 | - > | ||
| 222 | - <template #header> | ||
| 223 | - <h2 class="text-2xl font-bold text-center w-[100%]">{{ t('login.login') }}</h2> | ||
| 224 | - </template> | ||
| 225 | - <template #codeImg> | ||
| 226 | - <img :src="loginData.codeImg" @click="getCode" alt="" /> | ||
| 227 | - </template> | ||
| 228 | - | ||
| 229 | - <template #tool> | ||
| 230 | - <div class="flex justify-between items-center w-[100%]"> | ||
| 231 | - <ElCheckbox v-model="remember" :label="t('login.remember')" size="small" /> | ||
| 232 | - <ElLink type="primary" :underline="false">{{ t('login.forgetPassword') }}</ElLink> | ||
| 233 | - </div> | ||
| 234 | - </template> | ||
| 235 | - | ||
| 236 | - <template #login> | ||
| 237 | - <ElButton :loading="loading" type="primary" class="w-[100%]" @click="signIn"> | ||
| 238 | - {{ t('login.login') }} | ||
| 239 | - </ElButton> | ||
| 240 | - </template> | ||
| 241 | - | ||
| 242 | - <template #otherIcon> | ||
| 243 | - <div class="flex justify-between w-[100%]"> | ||
| 244 | - <Icon | ||
| 245 | - icon="ant-design:github-filled" | ||
| 246 | - :size="iconSize" | ||
| 247 | - class="cursor-pointer anticon" | ||
| 248 | - :color="iconColor" | ||
| 249 | - /> | ||
| 250 | - <Icon | ||
| 251 | - icon="ant-design:wechat-filled" | ||
| 252 | - :size="iconSize" | ||
| 253 | - class="cursor-pointer anticon" | ||
| 254 | - :color="iconColor" | ||
| 255 | - /> | ||
| 256 | - <Icon | ||
| 257 | - icon="ant-design:alipay-circle-filled" | ||
| 258 | - :size="iconSize" | ||
| 259 | - :color="iconColor" | ||
| 260 | - class="cursor-pointer anticon" | ||
| 261 | - /> | ||
| 262 | - <Icon | ||
| 263 | - icon="ant-design:weibo-circle-filled" | ||
| 264 | - :size="iconSize" | ||
| 265 | - :color="iconColor" | ||
| 266 | - class="cursor-pointer anticon" | ||
| 267 | - /> | ||
| 268 | - </div> | ||
| 269 | - </template> | ||
| 270 | - </Form> | ||
| 271 | -</template> | ||
| 272 | - | ||
| 273 | -<style lang="less" scoped> | ||
| 274 | -:deep(.anticon) { | ||
| 275 | - &:hover { | ||
| 276 | - color: var(--el-color-primary) !important; | ||
| 277 | - } | ||
| 278 | -} | ||
| 279 | -</style> |
yudao-ui-admin-vue3/src/views/Login/components/MobileForm.vue
| @@ -40,9 +40,6 @@ const rules = { | @@ -40,9 +40,6 @@ const rules = { | ||
| 40 | } | 40 | } |
| 41 | const loginData = reactive({ | 41 | const loginData = reactive({ |
| 42 | codeImg: '', | 42 | codeImg: '', |
| 43 | - // TODO @jinz：多余的变量 isShowPassword、captchaEnable | ||
| 44 | - isShowPassword: false, | ||
| 45 | - captchaEnable: true, | ||
| 46 | tenantEnable: true, | 43 | tenantEnable: true, |
| 47 | token: '', | 44 | token: '', |
| 48 | loading: { | 45 | loading: { |
| @@ -55,8 +52,7 @@ const loginData = reactive({ | @@ -55,8 +52,7 @@ const loginData = reactive({ | ||
| 55 | code: '' | 52 | code: '' |
| 56 | } | 53 | } |
| 57 | }) | 54 | }) |
| 58 | -// TODO @jinz：smsVO 小写哈 | ||
| 59 | -const SmsVO = reactive({ | 55 | +const smsVO = reactive({ |
| 60 | smsCode: { | 56 | smsCode: { |
| 61 | mobile: '', | 57 | mobile: '', |
| 62 | scene: 21 | 58 | scene: 21 |
| @@ -70,9 +66,9 @@ const mobileCodeTimer = ref(0) | @@ -70,9 +66,9 @@ const mobileCodeTimer = ref(0) | ||
| 70 | const redirect = ref<string>('') | 66 | const redirect = ref<string>('') |
| 71 | const getSmsCode = async () => { | 67 | const getSmsCode = async () => { |
| 72 | await getTenantId() | 68 | await getTenantId() |
| 73 | - SmsVO.smsCode.mobile = loginData.loginForm.mobileNumber | ||
| 74 | - console.log('getSmsCode begin:', SmsVO.smsCode) | ||
| 75 | - await sendSmsCodeApi(SmsVO.smsCode) | 69 | + smsVO.smsCode.mobile = loginData.loginForm.mobileNumber |
| 70 | + console.log('getSmsCode begin:', smsVO.smsCode) | ||
| 71 | + await sendSmsCodeApi(smsVO.smsCode) | ||
| 76 | .then(async (res) => { | 72 | .then(async (res) => { |
| 77 | // 提示验证码发送成功 | 73 | // 提示验证码发送成功 |
| 78 | ElMessage({ | 74 | ElMessage({ |
| @@ -119,9 +115,9 @@ const signIn = async () => { | @@ -119,9 +115,9 @@ const signIn = async () => { | ||
| 119 | const data = await validForm() | 115 | const data = await validForm() |
| 120 | if (!data) return | 116 | if (!data) return |
| 121 | loginLoading.value = true | 117 | loginLoading.value = true |
| 122 | - SmsVO.loginSms.mobile = loginData.loginForm.mobileNumber | ||
| 123 | - SmsVO.loginSms.code = loginData.loginForm.code | ||
| 124 | - await smsLoginApi(SmsVO.loginSms) | 118 | + smsVO.loginSms.mobile = loginData.loginForm.mobileNumber |
| 119 | + smsVO.loginSms.code = loginData.loginForm.code | ||
| 120 | + await smsLoginApi(smsVO.loginSms) | ||
| 125 | .then(async (res) => { | 121 | .then(async (res) => { |
| 126 | setToken(res?.token) | 122 | setToken(res?.token) |
| 127 | await userStore.getUserInfoAction() | 123 | await userStore.getUserInfoAction() |
yudao-ui-admin-vue3/src/views/Login/components/index.ts
| 1 | -export { default as LoginForm } from './LoginForm.vue' | ||
| 2 | -export { default as MobileForm } from './MobileForm.vue' | ||
| 3 | -export { default as LoginFormOld } from './LoginFormOld.vue' // TODO jinz：old 是不是可以删除哈，git 可以管理的 | ||
| 4 | -export { default as LoginFormTitle } from './LoginFormTitle.vue' | 1 | +import LoginForm from './LoginForm.vue' |
| 2 | +import MobileForm from './MobileForm.vue' | ||
| 3 | +import LoginFormTitle from './LoginFormTitle.vue' | ||
| 4 | + | ||
| 5 | +export {LoginForm, MobileForm, LoginFormTitle} |
yudao-ui-admin-vue3/src/views/Login/components/useLogin.ts
| @@ -41,31 +41,6 @@ export function useFormValid<T extends Object = any>(formRef: Ref<any>) { | @@ -41,31 +41,6 @@ export function useFormValid<T extends Object = any>(formRef: Ref<any>) { | ||
| 41 | } | 41 | } |
| 42 | } | 42 | } |
| 43 | 43 | ||
| 44 | -// TODO @jinz：多余的，是不是可以删除哈 | ||
| 45 | -export function useFormRules(formData?: Recordable) { | ||
| 46 | - const { t } = useI18n() | ||
| 47 | - | ||
| 48 | - const getAccountFormRule = computed(() => createRule(t('sys.login.accountPlaceholder'))) | ||
| 49 | - const getPasswordFormRule = computed(() => createRule(t('sys.login.passwordPlaceholder'))) | ||
| 50 | - const getSmsFormRule = computed(() => createRule(t('sys.login.smsPlaceholder'))) | ||
| 51 | - const getMobileFormRule = computed(() => createRule(t('sys.login.mobilePlaceholder'))) | ||
| 52 | - | ||
| 53 | - const validatePolicy = async (_: RuleObject, value: boolean) => { | ||
| 54 | - return !value ? Promise.reject(t('sys.login.policyPlaceholder')) : Promise.resolve() | ||
| 55 | - } | ||
| 56 | - | ||
| 57 | - const validateConfirmPassword = (password: string) => { | ||
| 58 | - return async (_: RuleObject, value: string) => { | ||
| 59 | - if (!value) { | ||
| 60 | - return Promise.reject(t('sys.login.passwordPlaceholder')) | ||
| 61 | - } | ||
| 62 | - if (value !== password) { | ||
| 63 | - return Promise.reject(t('sys.login.diffPwd')) | ||
| 64 | - } | ||
| 65 | - return Promise.resolve() | ||
| 66 | - } | ||
| 67 | - } | ||
| 68 | - | ||
| 69 | const getFormRules = computed( | 44 | const getFormRules = computed( |
| 70 | (): { | 45 | (): { |
| 71 | [k: string]: ValidationRule | ValidationRule[] | 46 | [k: string]: ValidationRule | ValidationRule[] |
yudao-ui-admin-vue3/src/views/infra/codegen/EditTable.vue
| @@ -27,7 +27,6 @@ const loading = ref(false) | @@ -27,7 +27,6 @@ const loading = ref(false) | ||
| 27 | const activeName = ref('cloum') | 27 | const activeName = ref('cloum') |
| 28 | const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() | 28 | const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() |
| 29 | const genInfoRef = ref<ComponentRef<typeof GenInfoFormVue>>() | 29 | const genInfoRef = ref<ComponentRef<typeof GenInfoFormVue>>() |
| 30 | -// TODO: 提交 | ||
| 31 | const submitForm = async () => { | 30 | const submitForm = async () => { |
| 32 | const basicInfo = unref(basicInfoRef) | 31 | const basicInfo = unref(basicInfoRef) |
| 33 | const genInfo = unref(genInfoRef) | 32 | const genInfo = unref(genInfoRef) |