Encountering an issue with JWT authentication token while using Laravel's broadcasting feature. The error message received is: {error: "token_invalid"}
Puzzlingly, the token appears to be valid as it works perfectly fine on /api routes but fails on non-api routes like /broadcasting/auth. Additionally, validating the token on jwt.io shows that it is indeed correct.
Any insights or solutions for this problem?
#----------------------------------
# api.php
#----------------------------------
Route::group(['middleware' => 'jwt.auth'], function () {
Route::apiResource('flights', 'Api\\FlightControllerAPI');
Route::apiResource('airlines', 'Api\\AirlineControllerAPI');
});
#--------------------------------
# BroadcastServiceProvider.php
#--------------------------------
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Broadcast;
class BroadcastServiceProvider extends ServiceProvider
{
public function boot()
{
// Broadcast::routes();
Broadcast::routes(['middleware' => ['jwt.auth']]);
require base_path('routes/channels.php');
}
}
#----------------------------
# app.js
#----------------------------
/**
* Loading all JavaScript dependencies including Vue and other libraries.
*/
require('./bootstrap')
window.Vue = require('vue')
import Echo from "laravel-echo";
window.Pusher = require('pusher-js');
var token = "<Your JWT Token Here>"
window.Echo = new Echo({
broadcaster: 'pusher',
key: '<Your Pusher Key>',
cluster: 'ap1',
encrypted: true,
auth: {
headers: {
Authorization: "Bearer " + token
}
}
});
export const serverBus = new Vue()
import axios from 'axios';
import VueAxios from 'vue-axios';
import App from './views/App.vue'
import router from './routes'
axios.defaults.baseURL = '/api'
Vue.use(VueAxios, axios)
Vue.router = router
Vue.use(require('@websanova/vue-auth'), {
auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
})
const app = new Vue({
el: '#app',
router,
render: app => app(App),
})