feat(login): 添加记住我登录功能

前端新增记住我勾选框,登录页挂载时自动恢复已保存的用户名,勾选时将用户名存入本地存储并在登录请求中携带对应参数;后端新增rememberMe参数处理逻辑,配置7天免登录的JWT有效期,重载JWT工具类以支持自定义令牌过期时间
This commit is contained in:
andy committed 2026-08-03 16:18:24 +08:00
1 parent f400a93bdd
commit 058e1fb8a7
6 files changed
+56 -4

No files matched your search

+1
View File
@@ -14,6 +14,7 @@ export interface User {
export interface LoginRequest {
username: string
password: string
rememberMe?: boolean
}
export interface LoginResponse {
+22 -2
View File
@@ -21,6 +21,9 @@
@keyup.enter="handleLogin"
/>
</el-form-item>
<el-form-item>
<el-checkbox v-model="remember">记住我(7天免登录)</el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary" size="large" :loading="loading" @click="handleLogin" class="login-btn">
登录
@@ -32,7 +35,7 @@
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useUserStore } from '@/stores/user'
@@ -49,6 +52,16 @@ const loginForm = reactive({
password: ''
})
const remember = ref(false)
onMounted(() => {
const savedUsername = localStorage.getItem('remember-username')
if (savedUsername) {
loginForm.username = savedUsername
remember.value = true
}
})
const rules: FormRules = {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
@@ -64,8 +77,15 @@ const handleLogin = async () => {
const hashedPassword = await hashPassword(loginForm.password)
await userStore.login({
username: loginForm.username,
password: hashedPassword
password: hashedPassword,
rememberMe: remember.value
})
// 记住用户名(勾选"记住我"时保存,否则清除)
if (remember.value) {
localStorage.setItem('remember-username', loginForm.username)
} else {
localStorage.removeItem('remember-username')
}
ElMessage.success('登录成功')
router.push('/')
} catch (error) {