vue实现密码登录
Vue 实现密码登录功能
基础模板结构
使用 Vue 的模板语法构建登录表单，包含用户名、密码输入框和提交按钮：
<template>
<div class="login-container">
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label for="username">用户名</label>
<input
type="text"
id="username"
v-model="form.username"
required
/>
</div>
<div class="form-group">
<label for="password">密码</label>
<input
type="password"
id="password"
v-model="form.password"
required
/>
</div>
<button type="submit">登录</button>
</form>
</div>
</template>数据绑定与验证
在 Vue 的 data 或 setup 中定义表单数据模型，并添加基础验证逻辑：
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
error: null
}
},
methods: {
validateForm() {
if (!this.form.username.trim()) {
this.error = '请输入用户名'
return false
}
if (this.form.password.length < 6) {
this.error = '密码长度不能少于6位'
return false
}
this.error = null
return true
}
}
}
</script>提交逻辑处理
实现表单提交方法，包含网络请求和结果处理：
methods: {
async handleSubmit() {
if (!this.validateForm()) return
try {
const response = await axios.post('/api/login', {
username: this.form.username,
password: this.form.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
this.error = error.response?.data?.message || '登录失败'
}
}
}密码显示切换功能
添加密码可见性切换功能提升用户体验：
<div class="form-group">
<label for="password">密码</label>
<div class="password-input">
<input
:type="showPassword ? 'text' : 'password'"
id="password"
v-model="form.password"
required
/>
<button
type="button"
@click="showPassword = !showPassword"
>
{{ showPassword ? '隐藏' : '显示' }}
</button>
</div>
</div>样式优化
添加基础样式提升视觉效果：
<style scoped>
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
input {
width: 100%;
padding: 8px;
}
button[type="submit"] {
background: #42b983;
color: white;
padding: 10px 15px;
border: none;
}
.password-input {
display: flex;
}
.error {
color: red;
}
</style>安全增强措施
实施额外的安全措施保护用户数据：
- 使用 HTTPS 协议传输数据
- 对密码进行前端加密处理（如 bcryptjs）
- 添加 CSRF 防护
- 实现请求限流防止暴力破解
import bcrypt from 'bcryptjs'
methods: {
async handleSubmit() {
const salt = bcrypt.genSaltSync(10)
const hashedPassword = bcrypt.hashSync(this.form.password, salt)
await axios.post('/api/login', {
username: this.form.username,
password: hashedPassword
})
}
}
