feat(login): 添加记住我登录功能
前端新增记住我勾选框,登录页挂载时自动恢复已保存的用户名,勾选时将用户名存入本地存储并在登录请求中携带对应参数;后端新增rememberMe参数处理逻辑,配置7天免登录的JWT有效期,重载JWT工具类以支持自定义令牌过期时间
This commit is contained in:
1 parent
f400a93bdd
commit
058e1fb8a7
6 files changed
+56
-4
No files matched your search
@@ -14,6 +14,7 @@ export interface User {
|
||||
export interface LoginRequest {
|
||||
username: string
|
||||
password: string
|
||||
rememberMe?: boolean
|
||||
}
|
||||
|
||||
export interface LoginResponse {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in new issue
Block a user