如何仅在点击「忘记密码」链接时调用PATCH方法修改用户密码

需求适配&bug修复步骤 #

1. 调整表单默认显示逻辑 #

首先给修改密码的外层容器设置默认隐藏，在CSS中添加规则：

.click-forgot-password {
  display: none;
}

或者直接在HTML的section标签上添加行内样式：<section class="click-forgot-password" style="display: none;">

2. 修正事件绑定逻辑 #

app.js 中原有的事件绑定逻辑错误，需要修改为：

$(() => {
  $('#sign-up').on('submit', authEvents.onSignUp)
  $('#sign-in').on('submit', authEvents.onSignIn)
  $('#sign-out').on('click', authEvents.onSignOut)
  // 点击忘记密码链接触发显示修改密码表单
  $('.forgot-password').on('click', authEvents.onShowChangePassword)
  // 修改密码表单提交时触发接口调用
  $('#change-password').on('submit', authEvents.onChangePassword)
})

3. 新增显示修改密码表单的事件处理 #

在events.js中新增处理函数，同时修正原有拼写错误：

// 新增：点击忘记密码后显示修改密码表单
const onShowChangePassword = (event) => {
  event.preventDefault()
  $('.click-forgot-password').show()
  // 可选：隐藏登录注册区块
  $('#before-sign-in').hide()
}

const onSignUp = (event) => {
  event.preventDefault() 
  const form = event.target
  // 修正原有拼写错误：getFromFields → getFormFields
  const formData = getFormFields(form)
  api.signUp(formData)
      .then(ui.signUpSuccess)
      .catch(ui.signUpFailure)
}
// 其他原有函数保持不变，注意要把新增的onShowChangePassword导出

4. 清理无效逻辑 #

删除ui.js的signInSuccess函数中两行冗余代码：

// 删除以下两行
$('#change-password').hide()
$('.changepassword').trigger('click')

5. 接口调用异常排查方向 #

• 先确认用户登录后store.user.token是否正常存储，没有有效token会导致修改密码接口鉴权失败
• 核对后端修改密码接口要求的参数格式，确认当前passwords[old]、passwords[new]的参数命名是否匹配后端要求
• 可以在changePassword函数中打印formData和接口返回的错误信息，快速定位参数或者路径错误

6. 体验优化（可选） #

修改密码成功后可自动隐藏表单，在changePasswordSuccess中添加：

$('.click-forgot-password').hide()
// 可选：重新显示登录表单引导用户重新登录
$('#before-sign-in').show()

内容的提问来源于stack exchange，提问作者Deepa Subramanian