使用Vue调用WordPress REST API获取用户元数据时遇未登录错误

核心问题 #

你的代码存在异步执行顺序错误：axios.post 请求获取token是异步操作，但你紧接着就调用了axios.get，此时token还未成功获取，导致请求头里的Authorization是空值，接口自然返回未登录提示。

修复后的代码 #

将获取用户数据的请求放到token请求的then回调内，确保拿到有效token后再发起请求：

mounted() {
    axios.post('https://example.com/wp-json/jwt-auth/v1/token', {
      username: 'USERNAME',
      password: 'PASSWORD',
    }).then((res) => {
      const token = res.data.token;
      // 拿到token后再发起获取用户数据的请求
      axios.get('https://example.com/wp-json/wp/v2/users/me', {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      }).then((res) => {
        console.log(res.data);
      }).catch(err => {
        console.error('获取用户数据失败:', err);
      });
    }).catch(err => {
      console.error('获取token失败:', err);
    });
}

额外注意事项 #

• 确认WordPress已正确安装并启用JWT Authentication for WP REST API插件，同时在wp-config.php中配置必要参数：

  define('JWT_AUTH_SECRET_KEY', '你的自定义密钥');
  define('JWT_AUTH_CORS_ENABLE', true);
  

• 检查用户名、密码是否正确，避免因认证失败导致无法获取token
• 添加catch捕获错误，方便快速排查请求失败原因

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