HTML或JavaScript实现密码校验后自动跳转回源页面的方案咨询

完全可以通过JavaScript实现条件触发重定向的需求，以下是几种落地性较高的方案：

方案1：纯前端轻量实现（适合静态站点） #

• 核心逻辑：用前端存储做校验状态标记，跳转时携带源页面地址
• 源页面判定逻辑：
  页面加载时先校验sessionStorage中是否存在有效授权标记，示例代码：

  // 校验逻辑可自定义，比如检查授权标记是否存在、是否过期
  const hasAuth = sessionStorage.getItem('authPassed') && Date.now() - Number(sessionStorage.getItem('authExpire')) < 24 * 60 * 60 * 1000
  if (!hasAuth) {
    // 编码当前页面地址作为跳转回传参数
    const redirectUrl = encodeURIComponent(window.location.href)
    window.location.href = `/password-check?redirect=${redirectUrl}`
  }
  

• 密码校验页逻辑：
  用户输入密码验证通过后，写入授权标记，再从URL参数中读取源地址跳转：

  // 密码校验通过后执行
  sessionStorage.setItem('authPassed', '1')
  sessionStorage.setItem('authExpire', String(Date.now()))
  // 读取回跳地址，没有的话默认跳首页
  const redirectUrl = new URLSearchParams(window.location.search).get('redirect')
  window.location.href = redirectUrl ? decodeURIComponent(redirectUrl) : '/'
  

• 该方案实现成本低，但安全性较弱，仅适合非敏感内容的访问拦截

方案2：前后端配合实现（适合敏感内容场景） #

• 核心逻辑：把校验判定逻辑放到后端，避免前端篡改绕过
• 源页面加载时先调用后端权限校验接口，接口返回未授权时，再携带当前页地址跳转到密码校验页
• 密码校验页把用户输入的密码传给后端验证，验证通过后后端下发授权cookie/令牌，前端再读取回跳地址跳转
• 该方案安全性更高，适合需要严格管控访问权限的页面

方案3：路由守卫实现（适合单页应用SPA） #

• 如果是Vue/React等框架开发的单页应用，可以直接在全局路由拦截逻辑中加入判定条件
• 以Vue路由为例，在beforeEach钩子中判断当前访问的路由是否需要权限，未授权的情况下直接拦截跳转，携带原路由地址到密码校验页
• 该方案不用在每个页面单独加逻辑，统一管控更方便

注意：所有纯前端的拦截逻辑都存在被绕过的可能，涉及敏感内容的场景一定要配合后端做二次校验，避免数据泄露。

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