javascript - 非 /api ルートでは JWT 認証トークンが無効です

Question

Laravel ブロードキャスト機能の JWT 認証トークンに問題があります。それは言います：{error: "token_invalid"}

原因はわかりませんが、トークンに問題はないようです。ルートでは機能しますが、など/apiの非ルートでは機能しません。jwt.ioでも有効です。api/broadcasting/auth

解決策はありますか？

#----------------------------------
# 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
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        // Broadcast::routes();
        Broadcast::routes(['middleware' => ['jwt.auth']]);

        require base_path('routes/channels.php');
    }
}

#----------------------------
# app.js
#----------------------------

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap')

window.Vue = require('vue')

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
import Echo from "laravel-echo";

window.Pusher = require('pusher-js');

var token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjIsImlzcyI6Imh0dHA6Ly9mbGlnaHQtc2NoZWR1bGUudGVzdC9hcGkvYXV0aC9yZWZyZXNoIiwiaWF0IjoxNTUxMjA1MzAzLCJleHAiOjE1NTEyMDkzMzUsIm5iZiI6MTU1MTIwNTczNSwianRpIjoiV0xWVzU5c28xb0NmTmw5TiJ9.PR6j0bIamYdA6-yAxwVqkeaadp4uZ0XHvEOhJjVInMk"
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '38505c9887e0f1a6b7b2',
    cluster: 'ap1',
    encrypted: true,
    auth: {
        headers: {
            Authorization: "Bearer " + token
        }
    }
});

export const serverBus = new Vue()

/**
 * Since this was a single page application, we will no longer use blade
 * templating engine. The laravel itself will act as pure API provider.
 * 
 * To customize routes, you can do it here.
 */
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),
})