同域React前端发送AJAX请求如何通过WordPress REST API获取当前登录用户ID？

核心原理 #

同域部署场景下不需要手动传递用户账号密码等凭证，WordPress原生支持基于Cookie + Nonce的REST API认证，浏览器会自动携带当前用户的登录Cookie，你只需要补充WordPress要求的防跨站请求伪造（CSRF）的nonce校验头即可完成认证。

具体实现步骤 #

• 第一步：在WordPress后端注入REST API认证所需的nonce到前端全局变量
  你可以在主题的functions.php文件或者自定义功能插件中添加以下代码，将nonce和REST API根地址注入到你的React脚本的全局变量中：

  function inject_wp_rest_auth_config() {
    // 此处替换为你在WordPress中注册React入口JS时填写的句柄名称
    $react_script_handle = 'your-react-app-script';
    wp_localize_script(
      $react_script_handle,
      'wpRestConfig',
      [
        'nonce' => wp_create_nonce('wp_rest'),
        'api_root' => get_rest_url()
      ]
    );
  }
  add_action('wp_enqueue_scripts', 'inject_wp_rest_auth_config');
  

• 第二步：在React请求中携带nonce请求头
  发起请求时在Header中添加X-WP-Nonce字段，值为注入的全局nonce即可，同域下浏览器会自动携带用户登录Cookie，无需手动处理凭证，以下是fetch请求示例：

  fetch(`${wpRestConfig.api_root}wp/v2/users/me`, {
    headers: {
      'X-WP-Nonce': wpRestConfig.nonce
    },
    credentials: 'same-origin' // 同域场景下默认即为该值，添加后兼容性更好
  })
  .then(res => {
    if (!res.ok) throw new Error('未登录或权限不足');
    return res.json();
  })
  .then(userData => {
    const currentUserId = userData.id;
    // 此处处理拿到的用户ID逻辑
  })
  .catch(err => console.error('请求失败：', err));
  

注意事项 #

• /wp/v2/users/me接口只有登录用户可以访问，未登录用户请求会返回401状态码，你可以根据返回状态自行处理未登录场景的逻辑
• nonce默认24小时过期，WordPress会自动进行有效性校验，无需你手动维护过期逻辑
• 该方案仅适合同域部署场景，跨域部署不支持Cookie自动携带，需要更换其他认证方式

内容的提问来源于stack exchange，提问作者Anthony Ceponis