0

我现在正在尝试在我的项目中使用 laravel 广播实现实时通知 ui。我已经通过在公共频道上广播使其工作，但是一旦我切换到私人频道，POST http://localhost:8000/broadcasting/auth 404 (Not Found)加载页面时就会出现错误。

这是我到目前为止确保检查的内容：

  1. 我已经取消注释theApp\Providers\BroadcastServiceProvider::class和Illuminate\Broadcasting\BroadcastServiceProvider::class,,config\app.php
  2. 我还在boot() 方法中包含Broadcast::routes();并测试了它是否可以工作但仍然没有骰子，Broadcast::routes(['middleware' => 'auth:admin']);Providers\BroadcastServiceProvider
  3. 我也尝试过传入Broadcast::routes();并且routes\web.php，
  4. 确保我已包含<meta name="csrf-token" content="{{ csrf_token() }}">在主应用程序中。

我正在做的项目使用 Vue JS 实现 SPA，它与后端完全分离，仅通过 api 连接。我希望有人可以让我了解我的方法出了什么问题。谢谢！

4

1 回答 1

1

这个问题是很久以前提出的，但我希望它对某人有用。我在使用独立 SPA (Vue.js) 和 REST API (Laravel) 时遇到了同样的问题。为了简化实时评论系统的实现，我使用了 laravel-echo和 pusher.js。为了解决这个问题，我根据“自定义授权端点章节”指定了身份验证端点

https://laravel.com/docs/8.x/broadcasting#customizing-the-authorization-endpoint

我使用了以下方法：

authEndpoint: process.env.VUE_APP_API_ROOT + '/broadcasting/auth'

其中 VUE_APP_API_ROOT 是“http://api.yoursite.dev

但后来我遇到了 CORS 的新问题。我对 API 端点和来自https://github.com/fruitcake/laravel-cors包的中间件使用 JWT 身份验证，该包允许指定“Access-Control-Allow-Origin”标头以解决 SPA 发送请求时的 CORS 问题来自不同域的 API。

因此，为了解决 CORS 和身份验证问题，我将广播路由添加到 api.php 并设置 JWT 身份验证中间件

Broadcast::routes(['middleware' => ['auth.jwt:api']]);

并使用 Laravel echo 设置自定义 Pusher 授权方

window.Echo = new Echo({
    broadcaster: "pusher",
    cluster: process.env.VUE_APP_PUSHER_APP_CLUSTER,
    encrypted: true,
    key: process.env.VUE_APP_PUSHER_APP_KEY,
    authorizer: (channel, options) => {
        return {
            authorize: (socketId, callback) => {
                axios.post(process.env.VUE_APP_API_ROOT + '/api/broadcasting/auth', {
                    socket_id: socketId,
                    channel_name: channel.name
                })
                .then(response => {
                    callback(false, response.data);
                })
                .catch(error => {
                    callback(true, error);
                });
            }
        };
    },
})

PS 为了向 axios 提供 JWT 令牌，我使用了允许从 Vuex 获取令牌的 axios 拦截器。

axios.interceptors.request.use(config => {
  const token = store.getters['auth/accessToken'];
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }

  return config;
});
于 2020-11-26T10:51:07.910 回答