andy
058e1fb8a7
前端新增记住我勾选框，登录页挂载时自动恢复已保存的用户名，勾选时将用户名存入本地存储并在登录请求中携带对应参数；后端新增rememberMe参数处理逻辑，配置7天免登录的JWT有效期，重载JWT工具类以支持自定义令牌过期时间
144 lines
3.5 KiB
Vue
144 lines
3.5 KiB
Vue
<template>
|
||
<div class="login-container">
|
||
<div class="login-box">
|
||
<h2 class="login-title">泊云智销通</h2>
|
||
<el-form ref="loginFormRef" :model="loginForm" :rules="rules" class="login-form">
|
||
<el-form-item prop="username">
|
||
<el-input
|
||
v-model="loginForm.username"
|
||
placeholder="请输入用户名"
|
||
prefix-icon="User"
|
||
size="large"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item prop="password">
|
||
<el-input
|
||
v-model="loginForm.password"
|
||
type="password"
|
||
placeholder="请输入密码"
|
||
prefix-icon="Lock"
|
||
size="large"
|
||
@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">
|
||
登录
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
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'
|
||
import { hashPassword } from '@/utils/crypto'
|
||
|
||
const router = useRouter()
|
||
const userStore = useUserStore()
|
||
|
||
const loginFormRef = ref<FormInstance>()
|
||
const loading = ref(false)
|
||
|
||
const loginForm = reactive({
|
||
username: '',
|
||
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' }]
|
||
}
|
||
|
||
const handleLogin = async () => {
|
||
if (!loginFormRef.value) return
|
||
await loginFormRef.value.validate(async (valid) => {
|
||
if (valid) {
|
||
loading.value = true
|
||
try {
|
||
// 对密码进行 SHA-256 哈希后再传输
|
||
const hashedPassword = await hashPassword(loginForm.password)
|
||
await userStore.login({
|
||
username: loginForm.username,
|
||
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) {
|
||
console.error('登录失败', error)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.login-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: linear-gradient(135deg, #FFFFFF 0%, #409EFF 100%);
|
||
}
|
||
|
||
.login-box {
|
||
width: 90%;
|
||
max-width: 400px;
|
||
padding: 40px;
|
||
background: white;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.login-title {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
color: #333;
|
||
}
|
||
|
||
.login-form {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.login-btn {
|
||
width: 100%;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.login-box {
|
||
padding: 24px;
|
||
}
|
||
|
||
.login-container {
|
||
padding: 16px;
|
||
}
|
||
}
|
||
</style>
|