
在现代Web应用中,密码重置功能是用户账户安全体系中不可或缺的一部分。本文将详细介绍如何使用Vue.js前端框架和SpringBoot后端框架实现一个基于邮箱验证的密码重置功能。
功能概述
本密码重置功能包含以下核心流程:
-
用户输入注册邮箱
-
系统发送验证码到该邮箱
-
用户输入收到的验证码和新密码
-
系统验证信息并重置密码
前端实现
页面布局
使用Vue.js和Element UI组件库构建密码重置页面:
<template>
<div class="Password-container">
<div class="allClass">
<div class="titleClass"><b>重置邮箱账号登录密码</b></div>
<el-form :rules="ruleList" :model="user" ref="userForm">
<!-- 邮箱输入 -->
<el-form-item prop="name">
<el-input placeholder="请输入您的邮箱" v-model="user.name"
prefix-icon="el-icon-message" autocomplete="new-password">
</el-input>
</el-form-item>
<!-- 验证码输入 -->
<el-form-item prop="code">
<el-input placeholder="邮箱收到的验证码" v-model="user.code"
style="width: 188px;" prefix-icon="el-icon-lock">
</el-input>
<el-button type="primary" @click="getEmailCode">获取验证码</el-button>
</el-form-item>
<!-- 新密码输入 -->
<el-form-item prop="password">
<el-input placeholder="请设置重置密码" v-model="user.password"
show-password prefix-icon="el-icon-lock">
</el-input>
</el-form-item>
<!-- 操作按钮 -->
<div class="buttonClass">
<el-button type="primary" @click="registerClick">重置密码</el-button>
<el-button type="warning" @click="$router.push('/login')">返回登录</el-button>
</div>
</el-form>
</div>
</div>
</template>
表单验证
使用Element UI的表单验证功能确保输入合法性:
data() {
return {
user: {},
ruleList: {
name: [
{required: true, message: '请输入您的邮箱账号', trigger: 'blur'},
{min: 3, max: 20, message: '长度在3-9个字符', trigger: 'blur'}
],
password: [
{required: true, message: '请设置重置密码', trigger: 'blur'},
{min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur'}
],
code: [
{required: true, message: '请输入收到的验证码', trigger: 'blur'},
{min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur'}
]
}
}
}
核心方法
- 获取邮箱验证码:
getEmailCode() {
// 验证邮箱格式
if (!this.user.name) {
this.$message.warning("请输入邮箱账号")
return
}
if (!/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(this.user.name)) {
this.$message.warning("请输入正确的邮箱账号")
return
}
// 发送请求获取验证码
this.$http.post("/big/email_code", this.user).then(res => {
if (res.data.code === "200") {
this.$message.success("邮箱验证码发送成功,请到对应邮箱查看")
} else {
this.$message.error(res.data.message)
}
})
}
- 重置密码:
registerClick() {
this.$refs["userForm"].validate(valid => {
if (valid) { // 表单校验合法
this.$http.post("/big/reset_password", this.user).then(res => {
if (res.data.code === "200") {
this.$router.push("/login")
this.$message.success("重置密码成功,请登录!")
} else {
this.$message.error(res.data.message)
}
});
}
})
}
后端实现
密码重置接口
@PostMapping("/reset_password")
public Res reset_password(@RequestBody User user) {
// 查询用户是否存在
User existUser;
try {
QueryWrapper<User> userQueryWrapper = new QueryWrapper<>();
userQueryWrapper.eq("name", user.getName());
existUser = userMapper.selectOne(userQueryWrapper);
} catch (Exception e) {
e.printStackTrace();
return Res.error(Constants.CODE_500, "系统错误");
}
if (existUser == null) {
return Res.error(Constants.CODE_600, "重置用户名有误,请核实邮箱账号");
}
// 验证码校验
QueryWrapper<Email> emailQueryWrapper = new QueryWrapper<>();
emailQueryWrapper.eq("email", user.getName());
Email existEmail = emailMapper.selectOne(emailQueryWrapper);
if (existEmail != null && !existEmail.getCode().equals(user.getCode())) {
if (existEmail.getCode().isEmpty()) {
return Res.error(Constants.CODE_600, "验证码已经失效,请重新获取验证码");
} else {
return Res.error(Constants.CODE_600, "验证码验证失败,请检查验证码是否填写正确");
}
}
// 验证通过后使验证码失效
if (existEmail != null && (existEmail.getCode() != null)) {
existEmail.setCode("");
emailMapper.updateById(existEmail);
}
// 更新密码(SHA256加密)
existUser.setPassword(MyUtils.getSHA256StrJava(user.getPassword()));
userMapper.updateById(existUser);
return Res.success(null);
}
安全考虑
-
密码加密:使用SHA256算法对密码进行加密存储
-
验证码时效性:验证通过后立即使验证码失效
-
异常处理:捕获数据库操作异常,防止系统错误
-
输入验证:前后端双重验证确保数据合法性
总结
本文详细介绍了基于Vue和SpringBoot的邮箱密码重置功能实现。该方案具有以下特点:
-
用户友好:清晰的界面提示和操作流程
-
安全性高:验证码机制+密码加密存储
-
健壮性强:完善的前后端验证和异常处理
实际开发中,还可以考虑添加以下增强功能:
-
验证码有效期限制(如5分钟过期)
-
密码强度检查
-
重置密码链接的有效期控制
-
操作日志记录
希望本文能帮助开发者快速实现安全的密码重置功能。完整代码已在前文展示,可根据实际需求进行调整和优化。