密码重置

让我们暂时放下高阶组件、React Context API 和会话处理。在本节中，我们将实现 Firebase 认证 API 提供的两个额外功能：

• 忘记密码（密码重置）
• 修改密码

我们首先实现第一个功能：忘记密码（密码重置）。

忘记密码

在本节课中，我们将实现“忘记密码”功能。由于我们已经在 Firebase 类中实现了对应的接口，因此可以直接在应用的组件中使用它。

以下文件在表单中添加了大部分密码重置逻辑。我们之前已经使用过类似的表单，因此不会有问题。

实现

将以下内容添加到 src/components/PasswordForget/index.js 文件中：

1import React, { Component } from 'react';
2import { Link } from 'react-router-dom';
3
4import { withFirebase } from '../Firebase';
5import * as ROUTES from '../../constants/routes';
6
7const PasswordForgetPage = () => (
8  <div>
9    <h1>忘记密码</h1>
10    <PasswordForgetForm />
11  </div>
12);
13
14const INITIAL_STATE = {
15  email: '',
16  error: null,
17};
18
19class PasswordForgetFormBase extends Component {
20  constructor(props) {
21    super(props);
22
23    this.state = { ...INITIAL_STATE };
24  }
25
26  onSubmit = event => {
27    const { email } = this.state;
28
29    this.props.firebase
30      .doPasswordReset(email)
31      .then(() => {
32        this.setState({ ...INITIAL_STATE });
33      })
34      .catch(error => {
35        this.setState({ error });
36      });
37
38    event.preventDefault();
39  };
40
41  onChange = event => {
42    this.setState({ [event.target.name]: event.target.value });
43  };
44
45  render() {
46    const { email, error } = this.state;
47
48    const isInvalid = email === '';
49
50    return (
51      <form onSubmit={this.onSubmit}>
52        <input
53          name="email"
54          value={this.state.email}
55          onChange={this.onChange}
56          type="text"
57          placeholder="电子邮箱地址"
58        />
59        <button disabled={isInvalid} type="submit">
60          重置我的密码
61        </button>
62
63        {error && <p>{error.message}</p>}
64      </form>
65    );
66  }
67}
68
69const PasswordForgetLink = () => (
70  <p>
71    <Link to={ROUTES.PASSWORD_FORGET}>忘记密码？</Link>
72  </p>
73);
74
75export default PasswordForgetPage;
76
77const PasswordForgetForm = withFirebase(PasswordForgetFormBase);
78
79export { PasswordForgetForm, PasswordForgetLink };

说明

代码虽然较长，但与我们之前实现的注册和登录表单并无不同。PasswordForgetPage 使用一个表单提交信息（电子邮箱地址），这些信息是 Firebase 认证 API 用于重置密码所需的。

onSubmit 是一个类方法，确保信息被发送到 API。如果请求成功，它还会重置表单输入框，并在请求出错时显示错误信息。

该表单在提交前也进行了验证。文件还实现了一个 PasswordForgetLink 组件，这个组件并未直接用于表单组件中。它类似于我们在 SignInPage 组件中使用的 SignUpLink 组件。

这个链接是相同的，仍然可用。如果用户在登录时忘记了密码，可以通过登录页面上的 PasswordForgetLink 进入重置密码页面，该链接在 src/components/SignIn/index.js 文件中被使用：

1import React, { Component } from 'react';
2import { withRouter } from 'react-router-dom';
3import { compose } from 'recompose';
4
5import { SignUpLink } from '../SignUp';
6import { PasswordForgetLink } from '../PasswordForget';
7import { withFirebase } from '../Firebase';
8import * as ROUTES from '../../constants/routes';
9
10const SignInPage = () => (
11  <div>
12    <h1>登录</h1>
13    <SignInForm />
14    <PasswordForgetLink />
15    <SignUpLink />
16  </div>
17);
18
19...

PasswordForgetPage 已经在 App 组件中配置了路由匹配。因此，我们可以将 PasswordForgetLink 组件添加到登录页面，确保路由与组件之间的映射完整。

现在启动应用程序并尝试重置密码。无论是否已登录都无关紧要。一旦发送请求，你应该会收到一封来自 Firebase 的邮件，提示你更新密码。

---

在下一节课中，我们将实现“修改密码”功能。