vue实现忘记密码
Vue 实现忘记密码功能
忘记密码功能通常包括以下步骤：用户输入邮箱或手机号，系统发送验证码或重置链接，用户验证后设置新密码。以下是基于 Vue 的实现方法。
前端页面设计
创建一个忘记密码的表单页面，包含邮箱或手机号输入框、验证码输入框和提交按钮。使用 Vue 的双向绑定功能实现数据同步。
<template>
<div class="forgot-password">
<h3>忘记密码</h3>
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label for="email">邮箱</label>
<input
type="email"
id="email"
v-model="form.email"
placeholder="请输入注册邮箱"
required
/>
</div>
<div class="form-group">
<label for="code">验证码</label>
<input
type="text"
id="code"
v-model="form.code"
placeholder="请输入验证码"
required
/>
<button
type="button"
@click="sendCode"
:disabled="isSending"
>
{{ isSending ? `${countdown}s后重新发送` : '发送验证码' }}
</button>
</div>
<button type="submit">提交</button>
</form>
</div>
</template>发送验证码逻辑
实现发送验证码的功能，包括倒计时和防重复发送。
<script>
export default {
data() {
return {
form: {
email: '',
code: '',
},
isSending: false,
countdown: 60,
};
},
methods: {
sendCode() {
if (this.isSending) return;
this.isSending = true;
// 调用API发送验证码
this.$axios.post('/api/send-code', { email: this.form.email })
.then(() => {
const timer = setInterval(() => {
this.countdown--;
if (this.countdown <= 0) {
clearInterval(timer);
this.isSending = false;
this.countdown = 60;
}
}, 1000);
})
.catch(() => {
this.isSending = false;
});
},
handleSubmit() {
// 验证表单数据
if (!this.form.email || !this.form.code) {
alert('请填写完整信息');
return;
}
// 调用API验证验证码并重置密码
this.$axios.post('/api/reset-password', this.form)
.then(() => {
alert('密码重置成功，请登录');
this.$router.push('/login');
})
.catch(error => {
alert(error.response.data.message);
});
},
},
};
</script>后端接口设计
后端需要提供两个接口：发送验证码和重置密码。发送验证码接口生成验证码并发送到用户邮箱，重置密码接口验证验证码并更新密码。
// 发送验证码接口示例
router.post('/api/send-code', async (req, res) => {
const { email } = req.body;
const code = Math.floor(1000 + Math.random() * 9000).toString();
// 存储验证码，可以使用Redis或数据库
await saveCode(email, code);
// 发送邮件
await sendEmail(email, '验证码', `您的验证码是：${code}`);
res.json({ success: true });
});
// 重置密码接口示例
router.post('/api/reset-password', async (req, res) => {
const { email, code, password } = req.body;
// 验证验证码
const savedCode = await getCode(email);
if (savedCode !== code) {
return res.status(400).json({ message: '验证码错误' });
}
// 更新密码
await updatePassword(email, password);
res.json({ success: true });
});安全性考虑
- 验证码有效期：设置验证码的有效期，通常为5-10分钟。
- 防暴力破解：限制验证码尝试次数，防止暴力破解。
- HTTPS：确保所有通信通过HTTPS加密，防止中间人攻击。
样式优化
使用CSS或UI框架（如Element UI、Vuetify）美化表单，提升用户体验。
<style scoped>
.forgot-password {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
input {
width: 100%;
padding: 8px;
margin-top: 5px;
}
button {
padding: 8px 15px;
background: #42b983;
color: white;
border: none;
cursor: pointer;
}
button:disabled {
background: #ccc;
}
</style>通过以上步骤，可以实现一个完整的忘记密码功能，涵盖前端页面、交互逻辑和后端接口。
