Ruby on Rails中如何在用户点击浏览器返回键时执行redirect_to？

嗨，这个需求我之前帮不少做在线考试系统的开发者解决过——确实直接禁用浏览器返回键不太现实，毕竟浏览器的安全机制限制了这一点，但咱们可以通过前端监听+后端校验的组合方案来实现你想要的效果，下面给你几个可行的思路：

方案一：前端监听popstate事件配合后端重定向 #

浏览器的返回键会触发popstate事件，我们可以在前端监听这个事件，引导用户跳转到指定页面；同时后端要做好答题进度的校验，防止用户绕过前端限制。

前端代码示例（比如放在考试页面的JS文件中） #

// app/javascript/exams/question.js
window.addEventListener('popstate', function(event) {
  // 跳转到当前应该作答的题目页面，或者自定义提示页
  window.location.href = '<%= exam_current_question_path(@exam) %>';
});

// 初始化一个空的历史状态，确保popstate事件能正常触发
history.pushState(null, null, window.location.href);

后端校验代码（控制器中） #

# app/controllers/exams_controller.rb
def current_question
  @exam = Exam.find(params[:id])
  # 从session或数据库中获取用户当前应该做的题目
  @target_question = @exam.current_question_for(current_user)

  # 如果用户试图访问非当前题目，直接重定向到正确页面
  if params[:question_id] && params[:question_id] != @target_question.id.to_s
    redirect_to exam_current_question_path(@exam), alert: '请按顺序完成考试，无法返回上一题'
  end
end

方案二：用Session记录答题进度，后端拦截非法访问 #

这个方案更侧重后端控制，不管用户是点返回键还是直接输入URL，都通过Session记录的当前题目ID来校验，从根源上阻止回退。

控制器核心代码示例 #

# app/controllers/exams_controller.rb
def show_question
  @exam = Exam.find(params[:exam_id])
  @question = Question.find(params[:id])
  # 从Session中读取用户当前的答题进度
  current_question_id = session["exam_#{@exam.id}_current"]

  # 校验当前访问的题目是否符合进度，不符合则重定向
  if current_question_id != @question.id
    redirect_to exam_question_path(@exam, current_question_id), alert: '请遵循考试流程作答'
  end
end

# 用户提交题目后，更新Session中的进度
def submit_question
  @exam = Exam.find(params[:exam_id])
  @question = Question.find(params[:question_id])
  # 处理答题提交逻辑...
  
  # 更新Session到下一题
  session["exam_#{@exam.id}_current"] = @exam.next_question_id(@question)
  redirect_to exam_question_path(@exam, session["exam_#{@exam.id}_current"])
end

方案三：基于Turbo的单页路由控制（适合现代Rails项目） #

如果你的项目用了Rails Turbo（默认Rails 7+已集成），可以通过Turbo的路由控制来拦截返回行为，体验更流畅：

// app/javascript/exams/question.js
document.addEventListener('turbo:load', function() {
  window.addEventListener('popstate', function(e) {
    e.preventDefault();
    // 重新加载当前页面，阻止回退到上一题
    Turbo.visit(window.location.href);
  });
  history.pushState({}, '', window.location.href);
});

关键注意事项 #

• 永远不要只依赖前端：用户可以禁用JavaScript，所以后端的进度校验是必须的，前端只是提升用户体验。
• 可以在用户触发回退时给出友好提示，比如弹窗告知“考试过程中无法返回上一题，请继续完成当前题目”。

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