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分钟过期)

  • 密码强度检查

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

  • 操作日志记录

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

相关推荐
Warren982 小时前
Vue2博客项目笔记(第一天)
java·开发语言·javascript·vue.js·windows·笔记·ecmascript
独泪了无痕4 小时前
深入浅析Vue3中的生命周期钩子函数
前端·vue.js
小白白一枚1114 小时前
vue和react的框架原理
前端·vue.js·react.js
字节逆旅4 小时前
从一次爬坑看前端的出路
前端·后端·程序员
Chan165 小时前
【智能协同云图库】第七期:基于AI调用阿里云百炼大模型,实现AI图片编辑功能
java·人工智能·spring boot·后端·spring·ai·ai作画
若梦plus5 小时前
微前端之样式隔离、JS隔离、公共依赖、路由状态更新、通信方式对比
前端
若梦plus5 小时前
Babel中微内核&插件化思想的应用
前端·babel
若梦plus5 小时前
微前端中微内核&插件化思想的应用
前端
若梦plus5 小时前
服务化架构中微内核&插件化思想的应用
前端