feat: 增加记住密码功能

frontend/src/views/Login.vue

@@ -13,21 +13,24 @@
                         <el-input type="password" v-model="form.password" placeholder="请输入密码" @keydown.enter="doLogin"></el-input>
                     </el-form-item>
                     <el-form-item style="text-align: center;">
-                        <el-button text>
-                            <el-icon><UserFilled /></el-icon>忘记密码
-                        </el-button>
-                        <el-button type="primary" @click="doLogin" :loading="loading">
-                            <el-icon><Lock /></el-icon> 登录
-                        </el-button>
+                        <div class="remember-container">
+                            <el-checkbox v-model="rememberPwd" label="记住密码" @change="saveRemember" />
+                        </div>
+                    </el-form-item>
+                    <el-form-item>
+                        <div class="login-line">
+                            <el-button type="primary" @click="doLogin" :loading="loading">
+                                <el-icon><Lock /></el-icon> 登录
+                            </el-button>
+                        </div>
                     </el-form-item>
                 </el-form>
             </el-col>
-            <el-col :span="9"></el-col>
         </el-row>
     </el-card>
 </template>
 <script setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import Breadcrumb from '../components/Breadcrumb.vue'
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
@@ -38,6 +41,42 @@ const router = useRouter();
 
 const form = ref({})
 const loading = ref(false)
+
+const rememberPwd = ref(false)
+const rememberKey = 'user-remember-pwd'
+
+
+const saveRemember = (e) => {
+    localStorage.setItem(rememberKey, JSON.stringify(rememberPwd.value))
+}
+const restoreRemember = () => {
+    const payload = localStorage.getItem(rememberKey)
+    if (payload) {
+        const p = JSON.parse(payload)
+        rememberPwd.value = p
+    }
+}
+
+const pwdKey = 'user-pwd'
+const savePwd = () => {
+    const payload = {
+        username: form.value.username,
+        password: form.value.password,
+    }
+    localStorage.setItem(pwdKey, JSON.stringify(payload))
+}
+const restorePwd = () => {
+    const payload = localStorage.getItem(pwdKey)
+    if (payload) {
+        const p = JSON.parse(payload)
+        form.value.username = p.username
+        form.value.password = p.password
+    }
+}
+const removePwd = () => {
+    localStorage.removeItem(pwdKey)
+}
+
 //
 const doLogin = async () => {
     if (!form.value.username) {
@@ -59,6 +98,11 @@ const doLogin = async () => {
         const { msg } = await store.dispatch('login', {...form.value});
         loading.value = false
         if (store.state.isAuthenticated) {
+            if (rememberPwd.value) {
+                savePwd()
+            } else {
+                removePwd()
+            }
             // 登录成功。跳转首页
             const path = store.getters.getCurrentMenu[0]?.path
             if (path) {
@@ -86,4 +130,21 @@ const doLogin = async () => {
     }
     
 }
-</script>
+
+restoreRemember()
+
+onMounted(() => {
+    restorePwd()
+})
+</script>
+
+<style scoped lang="scss">
+.remember-container {
+    width: 100%;
+    text-align: right;
+}
+.login-line {
+    width: 100%;
+    text-align: center;
+}
+</style>