InertiaJS+Laravel+Vue3：闪存数据导航后未及时消失的问题

一、闪存消息首次导航不消失的问题 #

原因 #

你的实现未正确适配Inertia请求下的Session闪存生命周期。Laravel默认的flash()机制是将数据存入Session，仅保留到下一次完整HTTP请求结束。但Inertia的页面导航属于AJAX/XHR请求，若你在共享数据时仅读取闪存却未主动清除，或清除时机错误，就会导致首次导航时数据仍被保留，直到第二次请求才被Laravel自动清理。

解决方法 #

1. 在共享数据时主动清除闪存
   修改App\Http\Middleware\HandleInertiaRequests.php的share方法，读取闪存消息后立即从Session中移除：

   public function share(Request $request)
   {
       return array_merge(parent::share($request), [
           'flash' => function () {
               $flash = [
                   'success' => session('success'),
                   'error' => session('error'),
                   // 补充你用到的其他消息类型
               ];
               // 读取后立即清除Session中的闪存数据
               session()->forget(['success', 'error']);
               return $flash;
           },
       ]);
   }
   

   这样每次Inertia请求都会读取并清除闪存，确保消息仅显示一次，导航后立即消失。

2. 修正自定义FlashMessageService的逻辑
   如果你的FlashMessageService封装了Session操作，需在获取消息的方法中加入清除逻辑：

   public function getSuccessMessage()
   {
       $message = session('success');
       if ($message) {
           session()->forget('success');
       }
       return $message;
   }
   

   不要依赖Laravel的自动清除机制，因为Inertia的AJAX请求会被视为一次完整请求，未主动清除的数据会保留到下一次请求。

二、Firefox开发者工具看不到闪存数据的问题 #

是否正常？ #

分两种情况判断：

• 若你指浏览器Application > Cookies/Local Storage中看不到：这是正常现象。Laravel的Session闪存数据默认存储在服务器端（文件/Redis/数据库等），浏览器仅存储session_id用于标识会话，无法直接查看具体闪存内容。
• 若你指Inertia的XHR请求响应中看不到：这属于异常，说明你未将闪存数据通过Inertia的共享数据传递到前端。

解决方法 #

1. 确认闪存数据已加入Inertia响应
   按照上述方法在HandleInertiaRequests中间件中共享闪存数据后，打开Firefox的Network标签，找到Inertia的XHR请求（通常为GET请求，响应类型是application/json），查看Response中的props字段，应能看到flash相关数据。

2. 前端验证接收逻辑
   在Vue组件中通过usePage()获取共享数据，确认能拿到闪存消息：

   <script setup>
   import { usePage } from '@inertiajs/vue3';
   const page = usePage();
   console.log(page.props.value.flash); // 在控制台查看是否存在数据
   </script>
   

额外注意事项 #

• 避免在控制器中手动返回闪存数据却不清除，比如：

  // 错误示例：仅传递闪存但未清除Session中的数据
  return Inertia::render('Page', [
      'success' => session('success'),
  ]);
  

  这种方式会导致Session中的闪存数据残留，下次请求仍会被读取。
• 若使用SessionFlashMessageRepository，需确保其内部的读取方法包含清除Session的逻辑，而非仅读取数据。

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