时间戳

首页 > 解决方案 > 检测页面上的表单提交

javascript - 检测页面上的表单提交

问题描述

我有一个位于防火墙后面的 vue 应用程序，它控制用户身份验证。我检测用户何时需要重新验证的唯一方法是当我的应用程序发送的 axios 请求收到 403 错误时。发生这种情况时，服务器还会返回一个网页，我将其视为error.response.data. 此页面要求用户通过嵌入式表单重新进行身份验证，该表单完成后对用户进行身份验证并将我的应用程序原始请求的输出发回。

我的问题是如何让用户重新进行身份验证，然后从我返回的请求中捕获数据？我可以向用户发送身份验证页面，例如使用：

var login_window = window.open('about:blank', '_blank');
login_window.document.write(error.response.data)
login_window.focus()

但是我看不到如何确定用户何时通过身份验证。发生这种情况时，login_window.document.body.innerText包含来自我的应用程序请求的 json 数据，这是我的应用程序需要但我不想向用户显示的数据。当“手动”执行此操作时，我也没有成功从中提取 json，login_window.document.body.innerText因为 json 结构已被剥离，现在看起来像这样：

JSON
Raw Data
Headers
Save
Copy
Collapse All
Expand All

status  \"OK\"
message \"\"
user    \"andrew\"

这个问题试图将我之前的问题简化为 javascript 问题。可能有更好的方法来做我想做的事axios；有关详细信息，请参阅在 vue 中处理 axios 请求返回的身份验证页面。

标签： javascriptrequestaxios

解决方案

一种解决方案是覆盖<form>的提交事件处理程序，然后用于XMLHttpRequest提交表单，这使您可以访问表单的响应数据和状态代码。状态码200表示用户已通过身份验证，响应数据应包含身份验证前原始请求的响应。

脚步：

  1. 查询该<form>元素的表单容器：

    const form = document.querySelector('#container > form').querySelector('form')

  2. 添加一个submit调用Event.preventDefault()停止提交的 -event 处理程序：

    form.addEventListener('submit', e => {
  e.preventDefault()
})

  3. 使用 XHR 发送原始请求，添加您自己的响应处理程序以获取结果数据：

    form.addEventListener('submit', e => {
  e.preventDefault()

  const xhr = new XMLHttpRequest()
  xhr.addEventListener('load', e => {
    const { response } = e.target
    const data = JSON.parse(response)
    // data now contains the response of the original request before authentication
  })
  xhr.open(form.method, form.action)
  xhr.send(new FormData(form))
})

演示

推荐阅读