perf: 优化登录记住我流程

kailong321200875 · Dec 16, 2023 · 2009594 · 2009594
1 parent 1f951d1
commit 2009594
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 9 deletions.
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { store } from '../index'
-import { UserType } from '@/api/login/types'
+import { UserLoginType, UserType } from '@/api/login/types'
 import { ElMessageBox } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
 import { loginOutApi } from '@/api/login'
@@ -12,6 +12,8 @@ interface UserState {
   tokenKey: string
   token: string
   roleRouters?: string[] | AppCustomRouteRecordRaw[]
+  rememberMe: boolean
+  loginInfo?: UserLoginType
 }
 
 export const useUserStore = defineStore('user', {
@@ -20,7 +22,10 @@ export const useUserStore = defineStore('user', {
       userInfo: undefined,
       tokenKey: 'Authorization',
       token: '',
-      roleRouters: undefined
+      roleRouters: undefined,
+      // 记住我
+      rememberMe: true,
+      loginInfo: undefined
     }
   },
   getters: {
@@ -35,6 +40,12 @@ export const useUserStore = defineStore('user', {
     },
     getRoleRouters(): string[] | AppCustomRouteRecordRaw[] | undefined {
       return this.roleRouters
+    },
+    getRememberMe(): boolean {
+      return this.rememberMe
+    },
+    getLoginInfo(): UserLoginType | undefined {
+      return this.loginInfo
     }
   },
   actions: {
@@ -75,6 +86,12 @@ export const useUserStore = defineStore('user', {
     },
     logout() {
       this.reset()
+    },
+    setRememberMe(rememberMe: boolean) {
+      this.rememberMe = rememberMe
+    },
+    setLoginInfo(loginInfo: UserLoginType | undefined) {
+      this.loginInfo = loginInfo
     }
   },
   persist: true

diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { reactive, ref, watch } from 'vue'
+import { reactive, ref, watch, onMounted, unref } from 'vue'
 import { Form, FormSchema } from '@/components/Form'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElCheckbox, ElLink } from 'element-plus'
@@ -51,19 +51,19 @@ const schema = reactive<FormSchema[]>([
   {
     field: 'username',
     label: t('login.username'),
-    value: 'admin',
+    // value: 'admin',
     component: 'Input',
     colProps: {
       span: 24
     },
     componentProps: {
-      placeholder: t('login.usernamePlaceholder')
+      placeholder: 'admin or test'
     }
   },
   {
     field: 'password',
     label: t('login.password'),
-    value: 'admin',
+    // value: 'admin',
     component: 'InputPassword',
     colProps: {
       span: 24
@@ -72,7 +72,7 @@ const schema = reactive<FormSchema[]>([
       style: {
         width: '100%'
       },
-      placeholder: t('login.passwordPlaceholder')
+      placeholder: 'admin or test'
     }
   },
   {
@@ -186,10 +186,21 @@ const schema = reactive<FormSchema[]>([
 
 const iconSize = 30
 
-const remember = ref(false)
+const remember = ref(userStore.getRememberMe)
+
+const initLoginInfo = () => {
+  const loginInfo = userStore.getLoginInfo
+  if (loginInfo) {
+    const { username, password } = loginInfo
+    setValues({ username, password })
+  }
+}
+onMounted(() => {
+  initLoginInfo()
+})
 
 const { formRegister, formMethods } = useForm()
-const { getFormData, getElFormExpose } = formMethods
+const { getFormData, getElFormExpose, setValues } = formMethods
 
 const loading = ref(false)
 
@@ -221,6 +232,16 @@ const signIn = async () => {
         const res = await loginApi(formData)
 
         if (res) {
+          // 是否记住我
+          if (unref(remember)) {
+            userStore.setLoginInfo({
+              username: formData.username,
+              password: formData.password
+            })
+          } else {
+            userStore.setLoginInfo(undefined)
+          }
+          userStore.setRememberMe(unref(remember))
           userStore.setUserInfo(res.data)
           // 是否使用动态路由
           if (appStore.getDynamicRouter) {