使用重定向后，来自 Laravel 的 Flash 消息未显示在 Inertia 中答案

【问题标题】：Flash messages from Laravel not shown in Inertia after using redirect with使用重定向后，来自 Laravel 的 Flash 消息未显示在 Inertia 中
【发布时间】：2022-12-09 19:54:16
【问题描述】：

基本上，每当出现错误、单个错误或成功消息时，我都会使用 SweetAlert2 触发祝酒词。

在我执行 Redirect::route('auth.index')->with([...]) 之前，它似乎工作正常，然后根本不会触发成功或错误/错误消息。

我可以打开 Vue DevTools 并确认错误/成功是可见的。

如果我使用错误/成功消息 Redirect::back()->with([...]) 重定向回同一页面，则工作正常。

一切正常，直到我想使用 Flash 消息转到另一个视图。我错过了什么或做错了什么？我一直在搜索和浏览 Inertia 文档和 vue 文档，但除了我已经完成的数据共享之外找不到任何相关内容。

如果有人有时间提供帮助，请提前致谢。

HandleInertiaRequests.php

/**
 * Defines the props that are shared by default.
 *
 * @see https://inertiajs.com/shared-data
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function share(Request $request): array
{
    return array_merge(parent::share($request), [
        'flash' => [
            'message' => fn () => $request->session()->get('message'),
            'type' => fn () => $request->session()->get('type'),
            'title' => fn () => $request->session()->get('title'),
        ],
    ]);
}

密码控制器.php

/**
 * Send a reset link to the given user.
 *
 * @param  \App\Http\Requests\Password\EmailRequest  $request
 * @return \Illuminate\Http\RedirectResponse
 */
public function email(EmailRequest $request)
{
    # Send reset link to user
    $status = Password::sendResetLink(
        $request->only('email')
    );

    # No leak if email exists or not.
    if ($status === Password::RESET_LINK_SENT || $status === Password::INVALID_USER) {
        return Redirect::route('auth.index')->with([
            'message' => __($status),
            'type' => 'success',
            'title' => 'Success',
        ]);
    }

    # Error
    return Redirect::back()->withErrors([__($status)]);
}
...

布局.vue

<template>
    <Swal :swalErrors="$page.props.errors" :swalFlash="$page.props.flash" />
</template>

<script>
import Swal from '../Component/Swal.vue';
</script>

Swal.vue

<template>
</template>

<script>
export default {
    props: {
        swalErrors: Object,
        swalFlash: Object
    },

    watch: {
        swalErrors: {
            handler: function (errors) {
                if (errors) {
                    this.toast(Object.values(errors).join(' '));
                }
            },
        },

        swalFlash: {
            handler: function (flash) {
                if (flash) {
                    this.toast(flash.message, flash.title, flash.type);
                }
            },
        }
    },

    methods: {
        toast: function (html, title, icon, timer) {
            title = title || 'Error';
            icon = icon || 'error';
            timer = timer || 4000;
            
            this.$swal.fire({
                position: 'top-end',
                toast: true,
                icon: icon,
                title: title,
                html: html,
                showClass: { popup: 'animate__animated animate__fadeInDown' },
                hideClass: { popup: 'animate__animated animate__fadeOutUp'  },
                timer: timer,
                timerProgressBar: true,
                showConfirmButton: false,
            });
        }
    }
}
</script>

【问题讨论】：

标签： laravel vuejs3 inertiajs

【解决方案1】：

所以基本上 flash message 只能使用一次。一旦您刷新或重定向到其他页面，它将被删除。如果您想保留会话以便可以将其用于其他页面，请参考此Laravel Docs

【讨论】：

【解决方案2】：

来自 reddit 的好心先生建议使用持久布局（来自 Inertia 文档）。我做到了，而且奏效了。 enter link description here

【讨论】：

【解决方案3】：

感谢分享。我的 laravel 项目需要完全相同的功能，这里是 app.js 中的默认布局配置，仍然无法正常工作。

resolve: (name) => {
    const page = resolvePageComponent(
        `./Pages/${name}.vue`,
        import.meta.glob('./Pages/**/*.vue'));
    page.then((module) => {
        if (module.default.layout === undefined && name.startsWith('Admin/')) {  
            module.default.layout = AdminLayout
        }
    });
    return page;
},

尝试了持久布局，同样的问题..任何详细的解决方案

【讨论】：