Laravel 5.4环境下阻止Chrome浏览器返回按钮的可行方案

嘿，这个需求在考试类系统里太常见了——毕竟要严格控制用户的答题流程，防止回头修改或者重复操作。你猜的没错，浏览器缓存确实是核心问题之一，但光处理缓存还不够，得前后端配合才能彻底解决。我来分享一下我在类似项目里的解决方案和思路：

用户通过Chrome返回按钮回到上一页，本质是浏览器加载了缓存的历史页面，而不是重新向服务器请求最新状态。这就导致后端的权限校验、流程控制逻辑根本没触发，所以单纯靠前端拦截是不够的，必须从「禁用缓存」+「后端状态校验」两方面入手。

1. 自定义中间件禁用页面缓存 #

给所有考试相关的路由添加一个禁用缓存的中间件，强制浏览器每次都向服务器请求最新页面：

首先创建中间件：

<?php

namespace App\Http\Middleware;

use Closure;

class NoCache
{
    public function handle($request, Closure $next)
    {
        $response = $next($request);
        
        // 设置响应头，彻底禁用浏览器缓存
        $response->headers->set('Cache-Control', 'no-cache, no-store, must-revalidate');
        $response->headers->set('Pragma', 'no-cache');
        $response->headers->set('Expires', '0');
        
        return $response;
    }
}

然后在app/Http/Kernel.php里注册这个中间件：

protected $routeMiddleware = [
    // 其他中间件...
    'no.cache' => \App\Http\Middleware\NoCache::class,
];

最后给考试路由组绑定这个中间件：

Route::group(['middleware' => ['auth', 'no.cache']], function () {
    Route::get('/exam/step/{id}', 'ExamController@showStep')->name('exam.step');
    // 其他考试相关路由...
});

2. 用Session记录考试流程状态 #

后端通过Session记录用户当前的考试步骤，当用户试图返回上一页时，直接拦截并跳转到当前合法步骤：

在控制器的步骤展示方法里添加校验：

public function showStep(Request $request, $stepId)
{
    // 从Session获取用户当前的考试步骤，默认第一步
    $currentValidStep = session('exam_current_step', 1);
    
    // 如果用户试图访问比当前步骤更早的页面，直接跳转到当前合法步骤
    if ($stepId < $currentValidStep) {
        return redirect()->route('exam.step', ['id' => $currentValidStep]);
    }
    
    // 正常展示当前步骤，同时更新Session的步骤记录
    session(['exam_current_step' => $stepId]);
    return view('exam.step', compact('stepId'));
}

虽然后端是核心，但前端可以做一些用户体验层面的拦截，避免用户误操作：

1. 监听浏览器返回事件 #

通过popstate事件拦截返回行为，同时重置历史记录：

// 页面加载时先推入一个状态，确保popstate能触发
window.onload = function() {
    history.pushState(null, null, window.location.href);
};

// 监听返回按钮事件
window.addEventListener('popstate', function(event) {
    // 阻止默认返回行为
    history.pushState(null, null, window.location.href);
    // 提示用户或者直接跳转到当前步骤
    alert('禁止返回上一页，请完成当前考试步骤');
    window.location.href = '/exam/step/' + currentStepId; // currentStepId从后端模板传入
});

2. 检测缓存加载并强制刷新 #

如果浏览器还是加载了缓存页面，强制刷新获取最新状态：

// performance.navigation.type === 2 表示通过返回按钮加载页面
if (performance.navigation.type === 2) {
    window.location.reload(true); // 强制从服务器刷新，不走缓存
}

• 前后端双重校验：前端拦截只是提升体验，后端的状态校验才是安全底线，不能只依赖前端（用户可以禁用JS绕过）。
• 考试结束后清理状态：用户完成考试后，清空Session里的exam_current_step等相关记录，避免后续通过缓存访问。
• 记录操作日志：可以把用户试图返回上一页的行为记录到日志里，方便后续排查违规操作。
• 多浏览器测试：虽然你主要关注Chrome，但也要测试Firefox、Edge等浏览器，确保响应头和前端逻辑兼容。
• 避免过度拦截：如果用户是意外点击返回，友好提示比直接强制跳转更人性化。

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