mirror of
				https://github.com/YunaiV/ruoyi-vue-pro.git
				synced 2025-10-31 10:37:41 +08:00 
			
		
		
		
	perf: loginform code
This commit is contained in:
		| @ -124,7 +124,15 @@ service.interceptors.response.use( | ||||
|   }, | ||||
|   (error: AxiosError) => { | ||||
|     console.log('err' + error) // for debug | ||||
|     ElMessage.error(error.message) | ||||
|     let { message } = error | ||||
|     if (message === 'Network Error') { | ||||
|       message = '后端接口连接异常' | ||||
|     } else if (message.includes('timeout')) { | ||||
|       message = '系统接口请求超时' | ||||
|     } else if (message.includes('Request failed with status code')) { | ||||
|       message = '系统接口' + message.substr(message.length - 3) + '异常' | ||||
|     } | ||||
|     ElMessage.error(message) | ||||
|     return Promise.reject(error) | ||||
|   } | ||||
| ) | ||||
|  | ||||
| @ -13,7 +13,14 @@ import { | ||||
| } from 'element-plus' | ||||
| import { reactive, ref, unref, onMounted, computed, watch } from 'vue' | ||||
| import * as LoginApi from '@/api/login' | ||||
| import { setToken, setTenantId } from '@/utils/auth' | ||||
| import { | ||||
|   setToken, | ||||
|   setTenantId, | ||||
|   getUsername, | ||||
|   getRememberMe, | ||||
|   getPassword, | ||||
|   getTenantName | ||||
| } from '@/utils/auth' | ||||
| import { useUserStoreWithOut } from '@/store/modules/user' | ||||
| import { useCache } from '@/hooks/web/useCache' | ||||
| import { usePermissionStore } from '@/store/modules/permission' | ||||
| @ -40,7 +47,6 @@ const iconHouse = useIcon({ icon: 'ep:house' }) | ||||
| const iconAvatar = useIcon({ icon: 'ep:avatar' }) | ||||
| const iconLock = useIcon({ icon: 'ep:lock' }) | ||||
| const iconCircleCheck = useIcon({ icon: 'ep:circle-check' }) | ||||
| const remember = ref(false) | ||||
| const LoginRules = { | ||||
|   tenantName: [required], | ||||
|   username: [required], | ||||
| @ -61,6 +67,7 @@ const loginData = reactive({ | ||||
|     tenantName: '芋道源码', | ||||
|     username: 'admin', | ||||
|     password: 'admin123', | ||||
|     rememberMe: false, | ||||
|     code: '', | ||||
|     uuid: '' | ||||
|   } | ||||
| @ -77,6 +84,20 @@ const getTenantId = async () => { | ||||
|   const res = await LoginApi.getTenantIdByNameApi(loginData.loginForm.tenantName) | ||||
|   setTenantId(res) | ||||
| } | ||||
| // 记住我 | ||||
| const getCookie = () => { | ||||
|   const username = getUsername() | ||||
|   const password = getPassword() | ||||
|   const rememberMe = getRememberMe() | ||||
|   const tenantName = getTenantName() | ||||
|   loginData.loginForm = { | ||||
|     ...loginData.loginForm, | ||||
|     username: username ? username : loginData.loginForm.username, | ||||
|     password: password ? password : loginData.loginForm.password, | ||||
|     rememberMe: rememberMe ? getRememberMe() : false, | ||||
|     tenantName: tenantName ? tenantName : loginData.loginForm.tenantName | ||||
|   } | ||||
| } | ||||
| // 登录 | ||||
| const handleLogin = async () => { | ||||
|   await getTenantId() | ||||
| @ -103,7 +124,7 @@ const getRoutes = async () => { | ||||
|   // 后端过滤菜单 | ||||
|   const res = await LoginApi.getAsyncRoutesApi() | ||||
|   wsCache.set('roleRouters', res) | ||||
|   await permissionStore.generateRoutes(res).catch(() => {}) | ||||
|   await permissionStore.generateRoutes(res) | ||||
|   permissionStore.getAddRouters.forEach((route) => { | ||||
|     addRoute(route as RouteRecordRaw) // 动态添加可访问路由表 | ||||
|   }) | ||||
| @ -120,8 +141,9 @@ watch( | ||||
|     immediate: true | ||||
|   } | ||||
| ) | ||||
| onMounted(() => { | ||||
|   getCode() | ||||
| onMounted(async () => { | ||||
|   await getCode() | ||||
|   getCookie() | ||||
| }) | ||||
| </script> | ||||
| <template> | ||||
| @ -165,7 +187,7 @@ onMounted(() => { | ||||
|           <el-input | ||||
|             v-model="loginData.loginForm.password" | ||||
|             type="password" | ||||
|             :placeholder="t('login.password')" | ||||
|             :placeholder="t('login.passwordPlaceholder')" | ||||
|             show-password | ||||
|             @keyup.enter="handleLogin" | ||||
|             :prefix-icon="iconLock" | ||||
| @ -178,7 +200,7 @@ onMounted(() => { | ||||
|             <el-col :span="14"> | ||||
|               <el-input | ||||
|                 v-model="loginData.loginForm.code" | ||||
|                 :placeholder="t('login.code')" | ||||
|                 :placeholder="t('login.codePlaceholder')" | ||||
|                 @keyup.enter="handleLogin" | ||||
|                 :prefix-icon="iconCircleCheck" | ||||
|                 style="width: 90%" | ||||
| @ -199,7 +221,9 @@ onMounted(() => { | ||||
|         <el-form-item> | ||||
|           <el-row justify="space-between" style="width: 100%"> | ||||
|             <el-col :span="6"> | ||||
|               <el-checkbox v-model="remember">{{ t('login.remember') }}</el-checkbox> | ||||
|               <el-checkbox v-model="loginData.loginForm.rememberMe"> | ||||
|                 {{ t('login.remember') }} | ||||
|               </el-checkbox> | ||||
|             </el-col> | ||||
|             <el-col :span="12" :offset="6"> | ||||
|               <el-link type="primary" style="float: right">{{ t('login.forgetPassword') }}</el-link> | ||||
| @ -254,7 +278,7 @@ onMounted(() => { | ||||
|               class="cursor-pointer anticon" | ||||
|             /> | ||||
|             <Icon | ||||
|               icon="ant-design:weibo-circle-filled" | ||||
|               icon="ant-design:dingtalk-circle-filled" | ||||
|               :size="iconSize" | ||||
|               :color="iconColor" | ||||
|               class="cursor-pointer anticon" | ||||
|  | ||||
| @ -67,15 +67,12 @@ const redirect = ref<string>('') | ||||
| const getSmsCode = async () => { | ||||
|   await getTenantId() | ||||
|   smsVO.smsCode.mobile = loginData.loginForm.mobileNumber | ||||
|   console.log('getSmsCode begin:', smsVO.smsCode) | ||||
|   await sendSmsCodeApi(smsVO.smsCode) | ||||
|     .then(async (res) => { | ||||
|   await sendSmsCodeApi(smsVO.smsCode).then(async () => { | ||||
|     // 提示验证码发送成功 | ||||
|     ElMessage({ | ||||
|       type: 'success', | ||||
|       message: t('login.SmsSendMsg') | ||||
|     }) | ||||
|       console.log('res', res) | ||||
|     // 设置倒计时 | ||||
|     mobileCodeTimer.value = 60 | ||||
|     let msgTimer = setInterval(() => { | ||||
| @ -85,9 +82,6 @@ const getSmsCode = async () => { | ||||
|       } | ||||
|     }, 1000) | ||||
|   }) | ||||
|     .catch(() => { | ||||
|       console.log('error') | ||||
|     }) | ||||
| } | ||||
| watch( | ||||
|   () => currentRoute.value, | ||||
| @ -126,7 +120,6 @@ const signIn = async () => { | ||||
| // 获取路由 | ||||
| const getRoutes = async () => { | ||||
|   // 后端过滤菜单 | ||||
|   // TODO @jinz:这块 getRoutes 的代码,是不是可以统一到 store 里,类似 ruoyi-vue 的做法,可能要找作者沟通下 | ||||
|   const routers = await getAsyncRoutesApi() | ||||
|   wsCache.set('roleRouters', routers) | ||||
|   await permissionStore.generateRoutes(routers).catch(() => {}) | ||||
|  | ||||
		Reference in New Issue
	
	Block a user
	 xingyu
					xingyu