Inertia.js中如何防止登录后浏览器回退显示登录页？

1. 后端设置缓存控制头 #

登录页和登录接口的响应必须添加禁止缓存的HTTP头，防止浏览器留存页面缓存。以Laravel为例，在返回登录页的控制器方法中设置：

return Inertia::render('Auth/Login')
    ->header('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0')
    ->header('Pragma', 'no-cache')
    ->header('Expires', 'Sat, 01 Jan 2000 00:00:00 GMT');

其他后端框架同理，只要确保登录页响应包含这些缓存禁止指令，就能避免浏览器缓存该页面。

2. 登录成功后替换历史记录 #

Inertia默认的redirect会新增历史条目，导致回退时回到登录页。改用replace方法替换当前历史记录：

// 前端登录成功跳转逻辑
Inertia.replace(route('dashboard'));

后端Laravel环境下，也可以在重定向时使用withReplace()：

return redirect()->route('dashboard')->withReplace();

这样登录后的历史记录会覆盖之前的登录页条目，回退时就不会回到登录页。

3. 前端拦截已登录用户访问登录页 #

在前端路由或页面钩子中判断用户登录状态，若已登录则直接跳转至仪表盘。以Vue 3为例：

import { usePage } from '@inertiajs/vue3';

const page = usePage();

if (page.props.auth.user) {
    Inertia.replace(route('dashboard'));
}

即使浏览器缓存了登录页，已登录用户访问时也会被自动跳转。

4. 临时方案：登录后刷新页面 #

如果是已上线项目存在用户缓存旧页面的情况，可在登录成功后触发页面刷新（不推荐频繁使用，会丢失SPA状态）：

window.location.reload();

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