将Worker线程与WordPress Nonce(自定义wp-api端点)一起使用

Question

我正在为WordPress构建一个插件，该插件必须向自定义WPneneneba API端点发送大量ajax请求。请求无法异步处理，因此必须使用Worker线程来防止浏览器在处理过程中挂起。到目前为止还没有那么复杂，但我想使用WordPress nonce进行验证。当我成为一名工人时，我是这样做的：

worker = new Worker("worker.js");

这将正确加载工作程序，但现在我想谈谈我们的自定义Ajax端点。因此，需要通过wp_enque_script加载脚本，以便验证nonce(我在这里正确吗？(。

wp_enqueue_script('itw_admin_update_products', plugins_url('assets/js/worker.js', __FILE__), [ 'jquery', 'wp-api' ], '1.0', true );

上述情况使其两次偏离航向。如何作为工作程序加载脚本，同时仍然能够在Ajax端点验证nonce？

Answer 1

我自己想好了：

注册REST路由

register_rest_route('my-rest-route/v1', '/rest-action', array(
'methods' => 'GET',
'callback' => 'callback-function',
'permission_callback' => function () { return current_user_can('edit_pages'); },

使脚本排队

wp_localize_script((函数传递加载工作程序所需的变量，并告诉工作程序应该在哪里执行请求。wp_enque_script((确保在正确的时刻加载脚本，并允许对API端点进行请求。

$params = array(
'jsWorker'      => plugins_url('assets/js/the-worker.js', ITW_BASEDIR . '/ipp-to-woo.php'),
'rest_route'    => get_rest_url(null, 'my-rest-route/v1/rest-action'),
);
wp_register_script('the_handler', plugins_url('assets/js/the-script.js', __FILE__), [ 'jquery', 'wp-api' ], '1.0', true );
wp_localize_script('the_handler', 'the_object', $params);
wp_enqueue_script('the_handler');

从script.js调用工作程序

因为我们使用wp_localize_script((将变量传递到客户端，所以现在我们可以使用_object.jsWorker来加载worker。加载worker后，我们传递一个带有worker.postMessage的对象，其中包含API端点和WordPress生成的nonce，以验证我们自己。

worker = new Worker(the_object.jsWorker);
worker.addEventListener('message', function(e) {
var response
response = JSON.parse(e.data)
processResponse(response);
});
worker.postMessage({'nonce': wpApiSettings.nonce, 'url': the_object.rest_route});

从worker.js执行Ajax调用

最后但同样重要的是，在worker.js中，我们使用xhr.setRequestHeader来验证自己，就像Wordpress一样。

function doAjaxCall(url, nonce){
var xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.setRequestHeader( 'X-WP-Nonce', nonce );
xhr.onload = function() {
if (xhr.status === 200) {
self.postMessage(xhr.response);
}
};
xhr.send();
}
self.addEventListener('message', function(e) {
var data = e.data;
self.doAjaxCall(data.url, data.nonce);
}, false);