在現代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分鐘過期）

• 密碼強度檢查

• 重置密碼鏈接的有效期控制

• 操作日志記錄

希望本文能幫助開發者快速實現安全的密碼重置功能。完整代碼已在前文展示，可根據實際需求進行調整和優化。