添加重置密码功能以响应 / redux 登录功能

Question

我使用以下带有 react/redux 教程的登录来在我的 React 应用程序中构建注册/登录功能，但是直到最近我才意识到我现在还需要重置密码/忘记密码功能。

此功能根本不是本教程的一部分，我只是想知道是否有人对我如何进行此操作有任何建议？

让我知道我是否可以分享有关我的应用程序的任何信息来帮助解决这个问题，或者是否有更好的地方来发布此类问题。我推迟在应用程序上分享更多内容，因为我认为这是多余的，因为教程中的信息几乎与我的注册/登录设置方式完全相同。

谢谢！

Answer 1

在用户输入您声明的正确凭据后（通常是用户名、电子邮件或两者）

1. 对您的后端进行 api 调用以创建密码重置令牌。将其存储在数据库中，并以一种或另一种形式将其与用户相关联（通常是同一个数据库条目）。

2. 向用户发送一封电子邮件，其中包含嵌入了密码重置令牌的链接。在你的 react-router 路由中有一个路由来处理你链接到的 url。

3. 让路由挂载一个具有 的组件，该组件componentDidMount获取令牌并将 api 发送到后端以验证令牌。

4. 验证后，在 react 组件中打开一个 ui 元素，允许用户设置新密码

5. 获取新密码、密码确认和重置令牌，然后向后端进行 api 调用以更改密码。您第二次需要令牌，因为您必须在实际密码更改过程中最后一次验证令牌，以确保没有人尝试任何恶意行为。隐藏状态背后的输入是不安全的。

6. 修改密码成功后删除后台的reset token

// in your routes file
<Route path="/password_reset/:token" component={PasswordResetValidator}/>

//
class PasswordResetValidator extends React.Component {
  state = {password: '', passwordReset: '', isValidated: false}

  async componentDidMount() {
    const response = await validatePasswordResetToken(this.props.token)
    if (response.ok) {
      this.setState({ isValidated: true })
    } else {
      // some error
    }
  }

  handleSubmit = () => {
    const { token } = this.props
    const { password, passwordReset } = this.state
    sendPasswordResetData({password, passwordReset, token})
    // probably want some confirmation feedback to the user after successful or failed attempt
  }

  render() {
    if(this.state.isValidated) {
      return (
        <div>
          <input />
          <input />
          <button onClick={this.handleSubmit}>Set new password</button>
        <div>
      )
    }
    return // something while token is being validated

  }
}

显然，您需要制作自己的文本输入处理程序。您还应该进行错误处理，并向用户提供良好的 ui 反馈。但最终，这完全取决于您的判断。

祝你好运