Vue中使用Axios获取WordPress当前用户数据返回空的问题排查

你当前的代码存在几个关键问题，导致无法获取已登录用户的数据：

1. 用户ID获取时机错误 #

rest_api_init钩子触发时，WordPress还未完成用户登录状态的初始化，此时调用get_current_user_id()只能拿到空值。不能把用户ID存在全局变量里，必须在回调函数内部获取当前用户ID：

function get_custom_users_data(){
    // 在这里获取当前用户ID，此时登录状态已完成初始化
    $user_id = get_current_user_id();
    return get_user_by( 'id', $user_id );
}

2. REST路由权限验证配置错误 #

注册路由时，nonce不是register_rest_route的合法参数。需要通过permission_callback来验证请求合法性，确保只有已登录用户能访问接口：

function add_custom_users_api(){
    register_rest_route( 'v1', 'get-user', array(
        'methods' => 'GET',
        'callback' => 'get_custom_users_data',
        // 添加权限验证回调
        'permission_callback' => function() {
            return is_user_logged_in();
        },
    ));
}

3. 前端请求未携带Nonce验证 #

WordPress REST API要求请求携带wp_rest Nonce才能识别登录用户。需要在前端请求头里添加X-WP-Nonce：

首先在主网站页面输出Nonce（比如主题的header.php中）：

<script>
window.wpApiSettings = {
    nonce: '<?php echo wp_create_nonce( 'wp_rest' ); ?>'
};
</script>

然后修改前端axios请求，带上Nonce头：

axios
    .get('https://example.com/wp-json/v1/get-user', {
        headers: {
            'X-WP-Nonce': window.wpApiSettings.nonce
        }
    })
    .then(response => console.log(response));

4. 跨域适配（无头前端与主站域名不同时） #

如果无头前端和WordPress主站不在同一域名下，需要配置CORS允许携带凭证。在functions.php中添加：

add_action('rest_api_init', function () {
    remove_filter('rest_pre_serve_request', 'rest_send_cors_headers');
    add_filter('rest_pre_serve_request', function ($value) {
        header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
        header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Allow-Headers: X-WP-Nonce, Content-Type');
        if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
            exit();
        }
        return $value;
    });
});

同时axios请求需设置withCredentials: true：

axios
    .get('https://example.com/wp-json/v1/get-user', {
        headers: {
            'X-WP-Nonce': window.wpApiSettings.nonce
        },
        withCredentials: true
    })
    .then(response => console.log(response));

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