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

Question

我使用 the following login with react/redux tutorial 在我的 React 应用程序中构建了一个注册/登录功能，但是直到最近我才意识到我现在还需要一个重置密码/忘记密码功能。

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

如果我可以分享有关我的应用程序的任何信息以帮助解决此问题，或者是否有更好的地方 post 此类问题，请告诉我。我推迟在应用程序上分享更多内容，因为我认为它是多余的，因为教程中的信息几乎完全是我的注册/登录设置方式。

谢谢！

Answer 1

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

对创建密码重置令牌的后端进行 api 调用。将其存储在数据库中，并以一种或另一种形式将其与用户相关联（通常是相同的数据库条目）。
向用户发送一封电子邮件 link，其中嵌入了密码重置令牌。在你的 react-router 路由中有一条路由可以处理你 link 到的 url。
让路由挂载一个具有 componentDidMount 的组件，该组件获取令牌并向后端生成 api 以验证令牌。
验证后，在 React 组件中打开一个 ui 元素，允许用户设置新密码
获取新密码、密码确认和重置令牌，然后向后端调用 api 以更改密码。您需要第二次使用令牌，因为您必须在实际密码更改过程中最后一次验证令牌，以确保没有人试图进行任何恶意操作。隐藏状态背后的输入是不安全的。
修改密码成功后删除后台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 反馈。但最终，这完全由您自行决定。

祝你好运

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

Adding reset password functionality to react / redux login functionality

reactjs

redux

jwt

change-password