Laravel+Inertia+React(ShadCN+Breeze)已认证后禁止访问登录页

问题现象 #

• 登录成功后点击浏览器返回按钮，会回到登录页面
• 已认证用户仍能直接访问登录页

现有代码 #

AuthenticatedSessionController.php #

public function create(Request $request): Response
{
    // If user is already logged in, redirect them to the dashboard
    if ($request->user()) {
        return redirect()->route('dashboard');
    }

    return Inertia::render('auth/login', [
        'canResetPassword' => Route::has('password.request'),
        'status' => $request->session()->get('status'),
    ]);
}

AuthLayout.tsx #

import { useEffect } from 'react';
import { usePage } from '@inertiajs/react';
import { type SharedData } from '@/types';
import { useRouter } from '@inertiajs/react';

export default function AuthLayout({ 
    children,
}: { 
    children: React.ReactNode,
}) {
    const { auth } = usePage<SharedData>().props;
    const router = useRouter();

    useEffect(() => {
        if (auth.user) {
            router.visit(route('dashboard')); // Redirect to dashboard if logged in
        }
    }, [auth.user]);

    return <>
        {children}
    </>;
}

可行解决思路 #

1. 强化后端路由防护 #

确保登录页路由绑定guest中间件，这是Laravel阻止已登录用户访问认证页面的核心机制，检查routes/web.php中的登录路由配置：

Route::get('/login', [AuthenticatedSessionController::class, 'create'])
    ->middleware('guest') // 必须添加该中间件
    ->name('login');

guest中间件会自动拦截已认证用户，直接重定向到默认首页（通常是dashboard），无需手动判断$request->user()。

2. 禁止浏览器缓存登录页 #

浏览器缓存是返回按钮回到登录页的常见原因，在登录页的响应中添加缓存控制头，强制浏览器不缓存页面：
修改AuthenticatedSessionController.php的create方法：

public function create(Request $request): Response
{
    return Inertia::render('auth/login', [
        'canResetPassword' => Route::has('password.request'),
        'status' => $request->session()->get('status'),
    ])->header('Cache-Control', 'no-cache, no-store, must-revalidate')
      ->header('Pragma', 'no-cache')
      ->header('Expires', '0');
}

添加后，浏览器返回时会重新请求服务器，此时guest中间件会直接重定向到dashboard。

3. 优化前端跳转逻辑（清除历史记录） #

当前前端跳转仅做页面跳转，未处理浏览器历史栈，导致登录页仍留在历史记录中。修改AuthLayout.tsx中的跳转逻辑，使用replace: true替换历史记录：

useEffect(() => {
    if (auth.user) {
        router.visit(route('dashboard'), { replace: true }); // 替换历史记录，移除登录页条目
    }
}, [auth.user]);

同时，在登录成功的跳转中也使用replace：
如果是前端提交登录请求，修改提交逻辑：

const submit = (e) => {
    e.preventDefault();
    router.post(route('login'), form.data(), {
        onSuccess: () => {
            router.visit(route('dashboard'), { replace: true });
        },
    });
};

如果是后端跳转，在AuthenticatedSessionController.php的store方法中添加头部：

public function store(LoginRequest $request): RedirectResponse
{
    $request->authenticate();
    $request->session()->regenerate();

    return redirect()->intended(RouteServiceProvider::HOME)
        ->header('X-Inertia-Replace', true); // 告诉Inertia替换历史记录
}

4. 全局导航拦截（提前阻止访问） #

在Inertia初始化时添加全局导航守卫，在页面加载前就判断用户状态，避免登录页短暂渲染：
修改app.tsx：

import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { router } from '@inertiajs/react';

createInertiaApp({
  resolve: (name) => resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
  setup({ el, App, props }) {
    // 全局导航拦截
    router.on('navigate', (event) => {
      const { auth } = props;
      // 若访问登录页且已登录，直接替换到dashboard
      if (event.detail.page.url.includes('/login') && auth.user) {
        router.visit(route('dashboard'), { replace: true });
      }
    });

    return <App {...props} />;
  },
});

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