Estoy tratando de escuchar un canal privado a través de la web y la protección API. La siguiente configuración funciona bien en web guard. Sin embargo, parece que tengo problemas para autorizar la API desde SPA/React. Estoy usando Laravel Passport como mi controlador de API de guardia.

configuración

 import Echo from "laravel-echo"; let e = new Echo({ broadcaster: "pusher", key: KEY, cluster: CLUSTER, authEndpoint: `/broadcasting/auth`, forceTLS: true, auth: { headers: { Accept: "application/json", Authorization: `Bearer ${TOKEN}` } } });

Cómo trato de suscribirme en useEffect

 useEffect(() => { e.private("orders_36") .listen(".OrderChange", (e) => { console.log(e); }) .subscribed((e) => console.log(e, "subscribed")) .error((e) => console.log(e, "error")); }, []);

el error que me sale

 {type: "AuthError", error: "Unable to retrieve auth string from auth endpoint - received status: 405 from /broadcasting/auth. Clients must be authenticated to join private or presence channels. See: https://pusher.com/docs/authenticating_users", status: 405}

Descomenté BroadcastServiceProvider de config/app.php, luego escribí el siguiente código en BroadcastServiceProvider.

ProveedorServicioDifusión.php

 Broadcast::routes([ 'middleware' => 'auth:web,api', ]);

rutas/canales.php

 Broadcast::channel('orders_{id}', function ($id) { return Auth::guard('api')->id() == $id; });

app/Eventos/CambiarPedido.php

 class OrderChange implements ShouldBroadcast { use Dispatchable, InteractsWithSockets, SerializesModels; public $order; public function __construct($order) { $this->order = $order; } public function broadcastOn() { return new PrivateChannel('orders_'.$this->order->user_id); } public function broadcastAs() { return 'OrderChange'; } public function broadcastWith() { return [ 'order' => $this->order, ]; } }

El código para la transmisión de llamadas en Controller

 broadcast(new OrderChange(OrderResource::make($order)))->toOthers();

He buscado en todas partes, pero las soluciones proporcionadas no parecen funcionar.