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，都是目前世界上顶流的技术，在全球范围内使用人数都非常广泛，非常值得学习。

今天的分享就到这里了，谢谢大家~