如何在 React 中实现用户注册和电子邮件验证

在构建需要用户注册功能的Web应用时,验证用户邮箱的真实性是非常关键的一步。本文将以 coding 的视角,结合实例代码,分享在React应用中实现用户注册与邮箱验证的具体实践流程。

设计邮箱验证组件UI

我们先来设计一个简单的邮箱验证组件,包含一个邮箱输入框和一个“发送验证邮件”按钮。当用户点击按钮时,我们发起邮件发送请求:

// EmailVerify.js

import { useState } from 'react';

export default function EmailVerify() {

  const [email, setEmail] = useState('');

  return (
    <div>
      <input
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button onClick={() => sendVerifyEmail(email)}>
        发送验证邮件
      </button>
    </div>
  )

}

这样就设计好了一个简单的邮箱验证UI。接下来我们要实现发送邮件和验证的功能。

实现发送验证邮件

发送验证邮件需要调用后端接口,这里我们可以使用 axios 发起 POST 请求:

// 在组件中

import axios from 'axios';

const sendVerifyEmail = async (email) => {
  const resp = await axios.post('/api/send-verify-email', { email });
  console.log(resp.data);
}

我们在按钮的点击事件中调用该异步方法,就可以发送验证邮件了。

验证邮箱链接

用户收到邮件并点击链接后,会重定向到我们的应用。这时需要验证 URL 中的 token 是否有效:

// VerifyEmail.js

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import axios from 'axios';

export default function VerifyEmail() {

  const location = useLocation();
  const token = new URLSearchParams(location.search).get('token');

  useEffect(() => {

    const verify = async () => {
      try {
        await axios.post('/api/verify-email', { token });
        // 验证成功后重定向
      } catch(err) {
        // 失败处理
      }
    };

    verify();

  }, [token]);

  return <h1>验证中...</h1>;

}

我们从 URL 中取出 token 参数,并发请求验证其有效性。然后就可以做成功或失败的异步处理。

实现失败提醒

最后,我们可以实现一个简单的失败提醒组件,在验证失败时使用:

// VerifyFail.js

export default function VerifyFail() {
  return (
    <div>
      <p>邮箱验证失败!</p>
      <button>重新发送验证邮件</button>
    </div>
  );
}

根据验证结果,我们可以展示不同的组件提醒用户.

另外,当验证过程中网络异常时,也有可能会失败。所以我们可以增加网络异常的错误处理:

// 在VerifyEmail组件中

useEffect(() => {

  const verify = async () => {

    try {
      await axios.post('/api/verify-email', { token });

    } catch(err) {

      // 处理网络异常
      if(err.response) {
        // 请求成功发出但服务端返回状态码非2xx的响应
      } else if (err.request) {
        // 请求发出但无响应返回
      } else {
        // 在设置请求时发生错误
      }

    }
  };

  verify();

}, [token]);

通过捕获错误对象提供的额外信息,我们可以针对不同的异常情况做不同的提示处理。

另外,我们也可以考虑限制多次验证失败后的频率,防止恶意请求。例如使用一个变量记录失败次数,在一定次数内禁止重新发送验证邮件。

集成注册流程

在实际应用中,我们需要在用户注册时发送验证邮件,注册之前验证其邮箱的有效性。

我们可以直接在注册组件提交事件中触发验证邮件发送:

// Register.js

const handleSubmit = async (email, password) => {

  await axios.post('/api/register', { email, password });

  // 直接调用发送验证邮件
  await sendVerifyEmail(email);

};