Laravel Jetstream中AppLayout.vue登出后如何跳转刷新至登录页？

问题分析 #

当前登出逻辑能成功完成身份退出，但页面未自动跳转回登录页，核心原因在于：

• 若登录页是普通Blade视图（而非Inertia组件），Inertia无法直接无缝跳转非Inertia页面
• 前端未对登出请求的成功响应做跳转处理

解决方案 #

方案1：前端手动处理跳转（适配登录页为普通Blade的情况） #

修改AppLayout.vue中的logout方法，在登出请求成功后直接跳转至登录页：

<script>
import { Head, Link } from '@inertiajs/inertia-vue3';

export default defineComponent({
    methods: {
        logout() {
            this.$inertia.post(route('logout')).then(() => {
                // 直接跳转登录页路由
                window.location.href = route('login');
            });
        },
    }
})
</script>

方案2：将登录页改为Inertia组件（符合Jetstream+Inertia架构） #

这种方式能实现Inertia的无缝跳转，无需手动刷新：

1. 创建Inertia登录组件
   在resources/js/Pages/Auth/Login.vue中创建登录组件（可参考Jetstream默认的登录Blade视图内容迁移）

2. 更新路由配置
   修改web.php中的根路由，返回Inertia响应：

use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Auth/Login');
});

3. 保留前端原登出方法
   Jetstream默认的LogoutController已会在登出后返回redirect()->route('login')，此时前端只需保留原逻辑，Inertia会自动处理跳转：

logout() {
    this.$inertia.post(route('logout'));
}

额外检查点 #

• 确认route('logout')能正确解析到Jetstream默认的POST /logout路由
• 若自定义了LogoutController，确保方法末尾返回redirect()->route('login')

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