Livewire会话过期时点击组件按钮无法跳转至登录页求助

问题场景 #

会话过期时点击Livewire组件的更新按钮，控制台报错，网络请求返回302重定向到登录页，但前端未自动跳转。

解决方案 #

1. 后端处理：返回JSON重定向指令替代302

Livewire请求属于AJAX类型，浏览器不会自动跟随AJAX请求的302重定向完成页面跳转，因此需要后端在会话过期时返回带重定向URL的JSON响应。

修改认证异常处理器：
编辑app/Exceptions/Handler.php，重写unauthenticated方法：

use Illuminate\Auth\AuthenticationException;
use Illuminate\Http\Request;

protected function unauthenticated($request, AuthenticationException $exception)
{
    if ($request->isLivewire() || $request->wantsJson()) {
        return response()->json([
            'redirect' => route('login')
        ], 401);
    }

    return redirect()->guest($exception->redirectTo() ?? route('login'));
}

或自定义Livewire中间件：
创建中间件HandleLivewireSessionExpiration：

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class HandleLivewireSessionExpiration
{
    public function handle(Request $request, Closure $next)
    {
        $response = $next($request);

        if ($request->isLivewire() && !Auth::check() && $response->status() === 302) {
            return response()->json([
                'redirect' => route('login')
            ], 401);
        }

        return $response;
    }
}

将其注册到app/Http/Kernel.php的web中间件组：

protected $middlewareGroups = [
    'web' => [
        // 其他中间件...
        \App\Http\Middleware\HandleLivewireSessionExpiration::class,
    ],
];

2. 前端处理：监听Livewire请求失败事件并跳转

在前端JS文件（如resources/js/app.js）中添加Livewire全局钩子，捕获401响应并执行页面跳转：

document.addEventListener('livewire:init', () => {
    Livewire.hook('request.failed', ({ status, response }) => {
        if (status === 401 && response?.redirect) {
            // 可选：添加用户提示
            alert('会话已过期，请重新登录');
            window.location.href = response.redirect;
        }
    });
});

3. 验证生效

修改完成后，清除缓存并编译前端资源：

php artisan cache:clear
npm run build # 开发环境用 npm run dev

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