如何使用JJWT生成含JWT的确认链接及React后续POST调用方法

你可以直接将生成的JWT作为URL参数拼接在确认链接中，JJWT生成的JWT默认采用Base64URL编码，本身符合URL规范，不需要额外做转义处理。

• 拼接规则：可以选择将JWT放在查询参数或者路径参数中，两种方式都可以：
  示例1（查询参数形式，适配后端接口校验场景）：

  // 调用你已有的JWT生成方法拿到token
  String token = generateJsonWebToken(userEmail);
  // 拼接确认链接，yourConfirmApi替换为你的邮箱校验接口地址
  String confirmLink = "https://你的站点域名/api/verify-email?token=" + token;
  

  示例2（路径参数形式，适配前端路由校验场景）：

  String token = generateJsonWebToken(userEmail);
  String confirmLink = "https://你的站点域名/verify-email/" + token;
  

拼接完成后直接把该链接放在邮件内容中发送给用户即可。

用户点击邮箱的确认链接跳转至你的React站点后，你需要先从URL中提取JWT，再将JWT放到请求头中发起POST校验请求，和Postman中使用的Authorization: Bearer <token>规则完全一致。

第一步：从URL中提取JWT #

如果是查询参数形式的链接，使用如下方式提取：

import { useSearchParams } from 'react-router-dom';

function VerifyEmailPage() {
  const [searchParams] = useSearchParams();
  // 提取token参数值
  const token = searchParams.get('token');

  // 后续发起请求逻辑
}

如果是路径参数形式的链接，使用如下方式提取：

import { useParams } from 'react-router-dom';

function VerifyEmailPage() {
  const { token } = useParams();

  // 后续发起请求逻辑
}

第二步：携带JWT发起POST请求 #

用原生fetch发起请求示例： #

const verifyEmail = async () => {
  try {
    const response = await fetch('https://你的站点域名/api/verify-email', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      }
    });
    const result = await response.json();
    // 处理校验结果，比如提示验证成功、跳转登录页
  } catch (error) {
    // 处理错误，比如token过期提示重新发送验证邮件
  }
}

用axios发起请求示例： #

import axios from 'axios';

const verifyEmail = async () => {
  try {
    const response = await axios.post('https://你的站点域名/api/verify-email', {}, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    // 处理校验结果
  } catch (error) {
    // 处理错误
  }
}

注意：你设置的JWT有效期为10分钟，前端可以在token校验失败时增加「重新发送验证邮件」的入口，方便超时用户重新操作。

内容的提问来源于stack exchange，提问作者Hrishikesh Shinde