多页测验/关卡类网页如何防止用户修改URL跳过未完成页面？

可以通过JavaScript/jQuery实现基础的拦截逻辑，但纯前端方案存在被绕过的风险，建议搭配后端校验实现更稳妥的防护。

纯前端实现方案（仅适合低安全性要求场景） #

实现逻辑是通过本地存储记录用户的真实关卡进度，页面加载时比对当前页面关卡是否符合进度要求，不符合就触发重定向：

• 玩家每通关一个关卡后，在localStorage或sessionStorage中写入最新的最高通关等级，示例代码：

// 通关关卡2后执行
localStorage.setItem('maxClearedLevel', 2)

• 每个关卡页面初始化时，读取本地存储的进度和当前页面的关卡等级做比对，异常就重定向：

// 示例为关卡3页面的代码，pageLevel对应当前页面的关卡编号
const currentPageLevel = 3
const maxClearedLevel = Number(localStorage.getItem('maxClearedLevel')) || 0

// 当前关卡超过用户已解锁的最高等级时，重定向到已解锁的最近关卡
if (currentPageLevel > maxClearedLevel + 1) {
  window.location.href = `/pg${maxClearedLevel + 1}`
}

注意：该方案可以被懂技术的用户通过修改本地存储值、禁用JavaScript等方式绕过，不适合需要严格防作弊的场景。

前后端结合方案（生产环境首选，无法被前端绕过） #

如果需要严格控制关卡访问权限，必须在服务端做校验：

• 玩家每通关一个关卡，将通关记录同步到后端，存储在对应用户的账号数据或游客会话中
• 每次玩家请求任意关卡页面时，后端先校验该用户的最高通关等级是否满足当前关卡的访问要求，不满足则直接在服务端返回重定向响应，或返回403拒绝访问
• 如果是单页应用，也可以在前端路由守卫中调用后端接口校验权限，不通过则跳转拦截，不过核心校验逻辑依然要放在后端避免被绕过

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