使用 Vue 和 Laravel API 的 Pusher 不工作
Pusher with Vue and Laravel API not working
我正在使用 Vue SPA 和 Laravel。我已经 google 它几个小时并尝试了很多东西,但我找不到让它工作的方法。
在index.html
我有
<meta name="csrf-token" content="{{ csrf_token() }}">
这是我的订阅方式:
subscribe() {
let pusher = new Pusher('key', {
cluster: 'ap1',
encrypted: true,
authEndpoint: 'https://api_url/broadcasting/auth',
auth: {
headers: {
'X-CSRF-Token': document.head.querySelector(
'meta[name="csrf-token"]'
)
}
}
})
let channel = pusher.subscribe(
'private-user.login.' + this.user.company_id
)
channel.bind('UserLogin', data => {
console.log(data)
})
}
我收到 419 错误消息:“因不活动而过期。请刷新并重试。”
如果你没有注意到我正在尝试收听私人频道。
419表示您没有通过CSRF token验证。要解决这个问题,有一些方法。
您应该将 CSRF 令牌传递给 Pusher 实例。您可以按照此处 https://pusher.com/docs/authenticating_users 的说明进行操作。我举个例子。
let pusher = new Pusher('app_key', {
cluster: 'ap1',
encrypted: true,
authEndpoint: 'https://api_url/broadcasting/auth',
auth: {
headers: {
// I assume you have meta named `csrf-token`.
'X-CSRF-Token': document.head.querySelector('meta[name="csrf-token"]')
}
}
});
在 auth 广播路由上禁用 CSRF 验证。但是,不推荐这样做,因为这里的 CSRF 验证很重要。
App\Http\Middleware\VerifyCsrfToken
/**
* The URIs that should be excluded from CSRF verification.
*
* @var array
*/
protected $except = [
'broadcasting/auth'
];
使用laravel-echo
,它在后台使用axios
,你只需要将CSRF令牌传递到axios
头。
// I assume you have meta named `csrf-token`.
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
}
希望得到答案。
我找到了解决方法希望对其他人有帮助:
在前端:
let pusher = new Pusher('app_key', {
cluster: 'ap1',
encrypted: true,
authEndpoint: 'https://api_url/broadcasting/auth',
auth: {
headers: {
Authorization: 'Bearer ' + token_here
}
}
})
let channel = pusher.subscribe(
'private-channel.' + this.user.id
)
channel.bind('event-name', data => {
console.log(data)
})
As you can see above no need to use csrf token, instead use the jwt token.
在后端,转到BroadcastServiceProvider
并更改此:
Broadcast::routes();
到 Broadcast::routes(['middleware' => ['auth:api']]);
我正在使用 Vue SPA 和 Laravel。我已经 google 它几个小时并尝试了很多东西,但我找不到让它工作的方法。
在index.html
我有
<meta name="csrf-token" content="{{ csrf_token() }}">
这是我的订阅方式:
subscribe() {
let pusher = new Pusher('key', {
cluster: 'ap1',
encrypted: true,
authEndpoint: 'https://api_url/broadcasting/auth',
auth: {
headers: {
'X-CSRF-Token': document.head.querySelector(
'meta[name="csrf-token"]'
)
}
}
})
let channel = pusher.subscribe(
'private-user.login.' + this.user.company_id
)
channel.bind('UserLogin', data => {
console.log(data)
})
}
我收到 419 错误消息:“因不活动而过期。请刷新并重试。”
如果你没有注意到我正在尝试收听私人频道。
419表示您没有通过CSRF token验证。要解决这个问题,有一些方法。
您应该将 CSRF 令牌传递给 Pusher 实例。您可以按照此处 https://pusher.com/docs/authenticating_users 的说明进行操作。我举个例子。
let pusher = new Pusher('app_key', { cluster: 'ap1', encrypted: true, authEndpoint: 'https://api_url/broadcasting/auth', auth: { headers: { // I assume you have meta named `csrf-token`. 'X-CSRF-Token': document.head.querySelector('meta[name="csrf-token"]') } } });
在 auth 广播路由上禁用 CSRF 验证。但是,不推荐这样做,因为这里的 CSRF 验证很重要。
App\Http\Middleware\VerifyCsrfToken
/** * The URIs that should be excluded from CSRF verification. * * @var array */ protected $except = [ 'broadcasting/auth' ];
使用
laravel-echo
,它在后台使用axios
,你只需要将CSRF令牌传递到axios
头。// I assume you have meta named `csrf-token`. let token = document.head.querySelector('meta[name="csrf-token"]'); if (token) { window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; }
希望得到答案。
我找到了解决方法希望对其他人有帮助:
在前端:
let pusher = new Pusher('app_key', {
cluster: 'ap1',
encrypted: true,
authEndpoint: 'https://api_url/broadcasting/auth',
auth: {
headers: {
Authorization: 'Bearer ' + token_here
}
}
})
let channel = pusher.subscribe(
'private-channel.' + this.user.id
)
channel.bind('event-name', data => {
console.log(data)
})
As you can see above no need to use csrf token, instead use the jwt token.
在后端,转到BroadcastServiceProvider
并更改此:
Broadcast::routes();
到 Broadcast::routes(['middleware' => ['auth:api']]);