Laravel Inertia Vue会话闪存消息登录报错求助

1. 修复前端Vue3中访问闪存数据的方式 #

Vue3的setup函数中无法直接通过$page访问，必须使用Inertia提供的usePage钩子：

<script setup>
import { usePage } from '@inertiajs/vue3';

const page = usePage();

// 用可选链操作符避免空值报错
const flashMessage = page.props.flash?.message;
</script>

模板中使用时同样要做空值判断：

<template>
  <div v-if="page.props.flash?.message" class="alert alert-danger">
    {{ page.props.flash.message }}
  </div>
</template>

2. 确保后端正确传递闪存数据到Inertia #

检查JetstreamServiceProvider中的登录逻辑，确保用户状态为Inactive时正确设置闪存并重定向：

// JetstreamServiceProvider.php
public function boot()
{
    $this->configurePermissions();

    Fortify::authenticateUsing(function (Request $request) {
        $user = User::where('email', $request->email)->first();

        if ($user && Hash::check($request->password, $user->password)) {
            if ($user->status === 'Inactive') {
                session()->flash('flash.message', '你的账户已被禁用，请联系管理员');
                return back(); // 重定向回登录页，Inertia会自动携带闪存
            }
            return $user;
        }
        return null;
    });
}

同时确认HandleInertiaRequests中间件已正确共享闪存数据：

// app/Http/Middleware/HandleInertiaRequests.php
public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'flash' => [
            'message' => session('flash.message'),
        ],
    ]);
}

3. 处理登录请求的响应逻辑 #

如果未使用back()而是直接返回Inertia渲染，需手动传递闪存：

return Inertia::render('Auth/Login', [
    'flash' => [
        'message' => session('flash.message'),
    ],
]);

4. 调试验证闪存数据 #

在前端app.js中添加调试代码，确认Inertia是否传递了flash props：

// app.js
createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, app, props, plugin }) {
    console.log('Inertia Props:', props); // 查看props中是否包含flash对象
    return createApp({ render: () => h(app, props) })
      .use(plugin)
      .mount(el);
  },
});

内容的提问来源于stack exchange，提问作者Rayhan Ahmed Rakib