VUE+SPRINGBOOT从0-1打造前后端-前后台系统-邮箱重置密码

在现代Web应用中，密码重置功能是用户账户安全体系中不可或缺的一部分。本文将详细介绍如何使用Vue.js前端框架和SpringBoot后端框架实现一个基于邮箱验证的密码重置功能。

功能概述

本密码重置功能包含以下核心流程：

1. 用户输入注册邮箱

2. 系统发送验证码到该邮箱

3. 用户输入收到的验证码和新密码

4. 系统验证信息并重置密码

前端实现

页面布局

使用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'}
      ]
    }
  }
}

核心方法

1. 获取邮箱验证码：

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)
    }
  })
}

1. 重置密码：

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);
}

安全考虑

1. 密码加密：使用SHA256算法对密码进行加密存储

2. 验证码时效性：验证通过后立即使验证码失效

3. 异常处理：捕获数据库操作异常，防止系统错误

4. 输入验证：前后端双重验证确保数据合法性

总结

本文详细介绍了基于Vue和SpringBoot的邮箱密码重置功能实现。该方案具有以下特点：

1. 用户友好：清晰的界面提示和操作流程

2. 安全性高：验证码机制+密码加密存储

3. 健壮性强：完善的前后端验证和异常处理

实际开发中，还可以考虑添加以下增强功能：

• 验证码有效期限制（如5分钟过期）

• 密码强度检查

• 重置密码链接的有效期控制

• 操作日志记录

希望本文能帮助开发者快速实现安全的密码重置功能。完整代码已在前文展示，可根据实际需求进行调整和优化。