Go1.20＋React18 如何实现修改密码功能？
大家好，我是张大鹏，今天又来给大家分享技术文章了。
今天要给大家分享的是Go1.20+React18+MySQL8如何实现前后端分离的用户修改密码功能。
首先，当用户登录以后，顶部导航中会显示一个修改密码的按钮，如图：
接着，当用户点击修改密码的时候，跳转到修改密码的页面，如图：
用户修改完毕以后，如果修改失败，要提示修改失败的信息：
如果修改成功，要提示修改成功并跳转到登录页面，让用户用新密码重新登录。
这个功能描述起来比较简单，但是实际上操作起来需要花不少功夫的。因为咱们时前后端分离的项目，不仅需要前端代码，还需要后端代码。接下来，大鹏带大家分别实现。
首先是后端，执行流程如下：
提取请求数据
校验密码是否一致
校验用户名是否存在
校验旧密码是否正确
对新密码进行加密
对加密后的新密码更新到数据库
返回响应结果
后端接口的完整代码如下：
func handleUpdatePassword(c *zdpgo_api.Context) {
? ?// 提取请求数据
? ?var req updatePasswordRequest
? ?err := c.ShouldBindJSON(&req)
? ?if err != nil {
? ? ? c.ResponseFailureWithError(err)
? ? ? return
? ?}
? ?// 校验密码是否一致
? ?if req.Password != req.RePassword {
? ? ? c.ResponseFailureArgs("两次密码不一致")
? ? ? return
? ?}
? ?// 查询用户名是否存在
? ?_, password, privateKey, err := db.UserIsExists(req.Username)
? ?if err != nil {
? ? ? log.Printf("根据用户名查询用户失败：%s\n", err.Error())
? ? ? c.ResponseFailureNotFound("不存在该用户")
? ? ? return
? ?}
? ?// 校验密码是否正确
? ?if !util.CheckPassword(privateKey, req.OldPassword, password) {
? ? ? c.ResponseFailureArgs("用户密码不正确")
? ? ? return
? ?}
? ?// 密码加密
? ?userPassword := util.Password(privateKey, req.Password)
? ?// 保存到数据库
? ?err = db.UserUpdatePassword(req.Username, userPassword)
? ?if err != nil {
? ? ? c.ResponseFailure("修改用户密码到数据库失败")
? ? ? return
? ?}
? ?// 返回
? ?c.ResponseSuccessNoData()
}
然后是前端，前端头部的导航代码如下：
{
? ?key: "user",
? ?label: `${userStateValue.username}`,
? ?children: [
? ? ? ?{
? ? ? ? ? ?key: "user-logout",
? ? ? ? ? ?label: "退出登录"
? ? ? ?},
? ? ? ?{
? ? ? ? ? ?key: "user-updatepassword",
? ? ? ? ? ?label: "修改密码"
? ? ? ?},
? ? ? ?{
? ? ? ? ? ?key: "user-info",
? ? ? ? ? ?label: "个人中心"
? ? ? ?},
? ?]
},
点击的时候，跳转到修改密码界面的代码如下：
const onClick: MenuProps['onClick'] = (e) => {
? ?switch (e.key) {
? ? ? ?case "user-logout":
? ? ? ? ? ?console.log("注销登录")
? ? ? ? ? ?// 设置用户
? ? ? ? ? ?setUser(currVal => {
? ? ? ? ? ? ? ?console.log("设置用户状态：", currVal)
? ? ? ? ? ? ? ?return {
? ? ? ? ? ? ? ? ? ?username: "",
? ? ? ? ? ? ? ? ? ?role: "",
? ? ? ? ? ? ? ? ? ?auths: [],
? ? ? ? ? ? ? ? ? ?menus: []
? ? ? ? ? ? ? ?}
? ? ? ? ? ?})
? ? ? ? ? ?// 清空缓存
? ? ? ? ? ?clearUserInfo()
? ? ? ? ? ?messageApi.open({
? ? ? ? ? ? ? ?type: 'success',
? ? ? ? ? ? ? ?content: '退出登录成功',
? ? ? ? ? ?});
? ? ? ? ? ?// 跳转到登录页面
? ? ? ? ? ?setTimeout(() => navigate("/login"), 500)
? ? ? ? ? ?break
? ? ? ?case "user-updatepassword":
? ? ? ? ? ?navigate("/user-updatepassword")
? ? ? ? ? ?break
? ? ? ?default:
? ? ? ? ? ?console.log("暂不支持此操作")
? ?}
};
修改用户密码界面的完整代码如下：
import {useEffect} from "react";
import {Button, Form, Input, message} from "antd";
import {apiUpdateUserPassword, updatePasswordRequest} from "../api/auth.ts";
import {useNavigate} from "react-router-dom";
import {useRecoilValue} from "recoil";
import {userState} from "../state/user.ts";
import {clearUserInfo} from "../util/storage.ts";
// 用户更新组件
function UserUpdatePassword() {
? ?// 路由器
? ?const navigate = useNavigate()
? ?// 全局的用户状态
? ?const userStateValue = useRecoilValue(userState);
? ?// 消息提示
? ?const [messageApi, contextHolder] = message.useMessage();
? ?// 表单信息
? ?const [form] = Form.useForm();
? ?// 表单布局
? ?const layout = {
? ? ? ?labelCol: {span: 8},
? ? ? ?wrapperCol: {span: 16},
? ?};
? ?// 按钮布局
? ?const tailLayout = {
? ? ? ?wrapperCol: {offset: 8, span: 16},
? ?};
? ?// 提交表单
? ?const onFinish = (data: updatePasswordRequest) => {
? ? ? ?console.log("要修改密码的参数：", data)
? ? ? ?apiUpdateUserPassword(data).then(() => {
? ? ? ? ? ?messageApi.open({
? ? ? ? ? ? ? ?type: 'success',
? ? ? ? ? ? ? ?content: '修改密码成功',
? ? ? ? ? ?});
? ? ? ? ? ?clearUserInfo()
? ? ? ? ? ?setTimeout(() => navigate("/login"), 1000)
? ? ? ?}).catch(err => {
? ? ? ? ? ?console.log("更新密码失败", err)
? ? ? ? ? ?messageApi.open({
? ? ? ? ? ? ? ?type: 'warning',
? ? ? ? ? ? ? ?content: "密码错误，请检查后重试",
? ? ? ? ? ?});
? ? ? ?})
? ?};
? ?// 重置表单
? ?const onReset = () => {
? ? ? ?// 修改表单默认信息
? ? ? ?form.setFieldsValue({
? ? ? ? ? ?username: userStateValue.username,
? ? ? ? ? ?old_password: "",
? ? ? ? ? ?password: "",
? ? ? ? ? ?re_password: "",
? ? ? ?});
? ?};
? ?// 加载要修改的用户信息
? ?useEffect(() => {
? ? ? ?// 设置标题
? ? ? ?document.title = "修改密码"
? ? ? ?onReset() // 重置表单
? ?}, [])
? ?return (
? ? ? ? ? ?{...layout}
? ? ? ? ? ?form={form}
? ? ? ? ? ?name="control-hooks"
? ? ? ? ? ?onFinish={onFinish}
? ? ? ? ? ?style={{maxWidth: 600}}
? ? ? ?>
? ? ? ? ? ?{contextHolder}
? ? ? ? ? ? ? ? ? ?placeholder="请输入旧密码"
? ? ? ? ? ? ? ?/>
? ? ? ? ? ? ? ? ? ?placeholder="请输入新密码"
? ? ? ? ? ? ? ?/>
? ? ? ? ? ? ? ? ? ?placeholder="请确认新密码"
? ? ? ? ? ? ? ?/>
? ? ? ? ? ? ? ? ? ?提交
? ? ? ? ? ? ? ? ? ?重置
? ?);
}
export default UserUpdatePassword
执行密码修改的核心代码如下：
const onFinish = (data: updatePasswordRequest) => {
? ?console.log("要修改密码的参数：", data)
? ?apiUpdateUserPassword(data).then(() => {
? ? ? ?messageApi.open({
? ? ? ? ? ?type: 'success',
? ? ? ? ? ?content: '修改密码成功',
? ? ? ?});
? ? ? ?clearUserInfo()
? ? ? ?setTimeout(() => navigate("/login"), 1000)
? ?}).catch(err => {
? ? ? ?console.log("更新密码失败", err)
? ? ? ?messageApi.open({
? ? ? ? ? ?type: 'warning',
? ? ? ? ? ?content: "密码错误，请检查后重试",
? ? ? ?});
? ?})
};
以上就行今天要给大家分享的全部内容了。无论是Go还是React，都是目前世界上顶流的技术，在全球范围内使用人数都非常广泛，非常值得学习。
今天的分享就到这里了，谢谢大家~
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20230605A00Z0R00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
