فهرست منبع

Add "Remember Me" functionality to login process

- Implement saveLoginInfo and loadLoginInfo functions to manage user credentials in localStorage.
- Update handleLogin to save login information upon successful login.
- Modify onMounted to load saved credentials if available.
- Adjust watch to clear saved information when "Remember Me" is unchecked.
yb 3 هفته پیش
والد
کامیت
93b777ce8c
1فایلهای تغییر یافته به همراه37 افزوده شده و 10 حذف شده
  1. 37 10
      src/views/login/index.vue

+ 37 - 10
src/views/login/index.vue

@@ -107,6 +107,7 @@ async function handleLogin() {
       try {
         const res = await userStore.loginAction(loginForm)
         if (res.code === 200) {
+          saveLoginInfo() // 保存登录信息
           ElMessage.success('登录成功')
           const redirect = (route.query.redirect as string) || '/'
           router.push(redirect)
@@ -127,21 +128,47 @@ async function handleLogin() {
   })
 }
 
+// 记住我 - 保存/读取登录信息
+const REMEMBER_KEY = 'login_remember'
+
+function saveLoginInfo() {
+  if (rememberMe.value) {
+    const data = {
+      username: loginForm.username,
+      password: btoa(loginForm.password), // base64 编码
+      remember: true
+    }
+    localStorage.setItem(REMEMBER_KEY, JSON.stringify(data))
+  } else {
+    localStorage.removeItem(REMEMBER_KEY)
+  }
+}
+
+function loadLoginInfo() {
+  const saved = localStorage.getItem(REMEMBER_KEY)
+  if (saved) {
+    try {
+      const data = JSON.parse(saved)
+      loginForm.username = data.username || ''
+      loginForm.password = data.password ? atob(data.password) : '' // base64 解码
+      rememberMe.value = data.remember ?? true
+    } catch {
+      localStorage.removeItem(REMEMBER_KEY)
+    }
+  }
+}
+
 onMounted(() => {
   getCode()
-  // 基础的“记住我”体验:仅记住用户名
-  const savedUser = localStorage.getItem('login_username')
-  if (savedUser) loginForm.username = savedUser
+  loadLoginInfo()
 })
 
-watch(
-  () => loginForm.username,
-  (val) => {
-    if (rememberMe.value) {
-      localStorage.setItem('login_username', val || '')
-    }
+// 取消勾选时清除保存的信息
+watch(rememberMe, (val) => {
+  if (!val) {
+    localStorage.removeItem(REMEMBER_KEY)
   }
-)
+})
 
 function goHelp() {
   ElMessage.info('请联系管理员重置密码')