JWT 身份验证令牌在非 /api 路由中无效

Posted 2023-03-10

【中文标题】JWT 身份验证令牌在非 /api 路由中无效

【英文标题】：JWT auth token invalid in non /api routes

【发布时间】：2019-07-20 09:37:03

【问题描述】：

我在 Laravel 广播功能上遇到 JWT 身份验证令牌问题。它说：error: "token_invalid"

我不知道为什么会发生这种情况，但令牌似乎没有问题。它适用于/api 路由，但不适用于非api 路由，例如/broadcasting/auth。在jwt.io 上也有效。

有什么办法吗？

#----------------------------------
# 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),
)

【参考方案1】：

刚刚找到解决这个问题的办法，在web.php添加测试路由后尝试访问/test?token=current_token，出现this token has been blacklisted异常。

我只是通过添加以下行来禁用它：JWT_BLACKLIST_ENABLED=false 到.env 文件，它开始正常工作。

#--------------------
# web.php
#--------------------

Route::get('/test', function () 
    return JWTAuth::parseToken()->authenticate();
);