Laravel Jetstream强制启用2FA按钮失效问题排查求助

问题背景 #

基于Laravel Jetstream v2.7开发的项目中，自定义了has2FaEnabled中间件用于强制未启用2FA的用户跳转到专属2FA启用页面，但页面内使用Jetstream自带的profile.two-factor-authentication-form Livewire组件时，点击启用2FA的按钮无任何响应。相同组件在个人资料设置页可正常工作，核心需求是通过中间件实现2FA强制启用逻辑。

相关代码配置 #

中间件代码

public function handle(Request $request, Closure $next): Response
{
    if (is_null(Auth::user()->two_factor_secret)) {
        return redirect(route('2fa'));
    }

    return $next($request);
}

自定义2FA视图代码

@if (Laravel\Fortify\Features::canManageTwoFactorAuthentication())
     <div class="mt-10 sm:mt-0">
         @livewire('profile.two-factor-authentication-form')
     </div>
@endif

@if(auth()->user()->two_factor_secret)
     <a href="dashboard" class="btn btn-lg btn-primary backmobile">Next</a>
@endif

路由配置

// 2FA
Route::get('2fa', function () {
    return view('auth1.2fa');
})->name('2fa');

// 注册完成后跳转至仪表盘
Route::group(['middleware' => ['registration_completed', 'verified', 'checkSuspendedUser','has2FaEnabled']], function () {
    // 受保护的路由（如dashboard）
});

问题原因分析 #

核心问题是中间件对Livewire请求的循环拦截：

1. 当用户点击启用2FA按钮时，Livewire会发送AJAX请求到livewire/message/profile.two-factor-authentication-form接口；
2. 该请求会被全局或路由组中的has2FaEnabled中间件拦截——此时用户尚未完成2FA启用，中间件会强制跳转到2fa页面，直接中断了Livewire的请求流程，导致按钮点击无响应；
3. 个人资料页正常工作的原因是：该页面本身不在has2FaEnabled中间件的拦截范围内，Livewire请求可正常完成。

解决方案 #

1. 修改中间件，跳过Livewire请求 #

更新has2FaEnabled中间件，让它不对Livewire的操作请求进行拦截，确保2FA启用流程能正常执行：

public function handle(Request $request, Closure $next): Response
{
    // 跳过Livewire的AJAX请求，避免拦截2FA启用操作
    if ($request->is('livewire/*')) {
        return $next($request);
    }

    // 仅对非Livewire的页面请求进行2FA检查
    if (!is_null(Auth::user()) && is_null(Auth::user()->two_factor_secret)) {
        return redirect(route('2fa'));
    }

    return $next($request);
}

2. 确保自定义视图包含Livewire必要上下文 #

自定义2FA页面必须加载Livewire所需的CSRF令牌和脚本，最简单的方式是继承Jetstream的基础布局：

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            请启用双因素认证
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    @if (Laravel\Fortify\Features::canManageTwoFactorAuthentication())
                        <div class="mt-10 sm:mt-0">
                            @livewire('profile.two-factor-authentication-form')
                        </div>
                    @endif

                    @if(auth()->user()->two_factor_secret)
                        <a href="{{ route('dashboard') }}" class="btn btn-lg btn-primary backmobile mt-4">下一步</a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

如果不继承Jetstream布局，需手动添加以下代码确保Livewire正常运行：

@csrf
@livewireScripts

3. 确认中间件应用范围 #

确保has2FaEnabled中间件仅应用于需要保护的路由组（如仪表盘、业务功能路由），不要全局注册，避免影响2FA启用页面的相关请求。

验证要点 #

1. 未启用2FA的用户登录后，会被正确跳转到自定义2FA页面；
2. 点击启用2FA按钮可正常触发Livewire流程，完成2FA配置；
3. 2FA启用完成后，页面显示“下一步”按钮，点击可进入受保护的仪表盘；
4. 已启用2FA的用户可正常访问所有受保护路由。

内容的提问来源于stack exchange，提问作者Pietro Giordano