perf: loginform code

xingyu
1 parent 6d27ba43
Showing 3 changed files with 56 additions and 31 deletions
yudao-ui-admin-vue3/src/config/axios/index.ts
yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
yudao-ui-admin-vue3/src/views/Login/components/MobileForm.vue
@@ -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: &#39;ep:house&#39; })
 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 () =&gt; {
   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 () =&gt; {
   // 后端过滤菜单
   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(() =&gt; {
           <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(() =&gt; {
             <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(() =&gt; {
         <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(() =&gt; {
               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,27 +67,21 @@ const redirect = ref&lt;string&gt;(&#39;&#39;)
 const getSmsCode = async () => {
   await getTenantId()
   smsVO.smsCode.mobile = loginData.loginForm.mobileNumber
-  console.log('getSmsCode begin:', smsVO.smsCode)
-  await sendSmsCodeApi(smsVO.smsCode)
-    .then(async (res) => {
-      // 提示验证码发送成功
-      ElMessage({
-        type: 'success',
-        message: t('login.SmsSendMsg')
-      })
-      console.log('res', res)
-      // 设置倒计时
-      mobileCodeTimer.value = 60
-      let msgTimer = setInterval(() => {
-        mobileCodeTimer.value = mobileCodeTimer.value - 1
-        if (mobileCodeTimer.value <= 0) {
-          clearInterval(msgTimer)
-        }
-      }, 1000)
-    })
-    .catch(() => {
-      console.log('error')
+  await sendSmsCodeApi(smsVO.smsCode).then(async () => {
+    // 提示验证码发送成功
+    ElMessage({
+      type: 'success',
+      message: t('login.SmsSendMsg')
     })
+    // 设置倒计时
+    mobileCodeTimer.value = 60
+    let msgTimer = setInterval(() => {
+      mobileCodeTimer.value = mobileCodeTimer.value - 1
+      if (mobileCodeTimer.value <= 0) {
+        clearInterval(msgTimer)
+      }
+    }, 1000)
+  })
 }
 watch(
   () => currentRoute.value,
@@ -126,7 +120,6 @@ const signIn = async () =&gt; {
 // 获取路由
 const getRoutes = async () => {
   // 后端过滤菜单
-  // TODO @jinz：这块 getRoutes 的代码，是不是可以统一到 store 里，类似 ruoyi-vue 的做法，可能要找作者沟通下
   const routers = await getAsyncRoutesApi()
   wsCache.set('roleRouters', routers)
   await permissionStore.generateRoutes(routers).catch(() => {})