检测页面上的表单提交 [英] Detect form submission on a page

问题描述

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

I have a vue app that sits behind a firewall, which controls user authentication. The only way that I have of detecting when the user needs to re-authenticate is when the axios requests sent by my app receive a 403 error. When this happens the server also returns a web page, which I see as, error.response.data. This page asks the user to re-authenticate via an embedded form that, when completed, authenticates the user and sends back the output from my app's original request.

我的问题是如何让用户重新进行身份验证，然后从返回的请求中捕获数据?我可以通过以下方式向用户发送身份验证页面:

My questions is how can I get the user to re-authenticate and then capture the data from my request that is returned? I can send the user the authentication page, for example by using:

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

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

but then I don't see how to determine when the user has authenticated. When this happens, login_window.document.body.innerText contains the json data from my app's request, which my apps needs but which I don't want to show to the user. When doing this "by hand", I also have not succeeded in extracting the json from login_window.document.body.innerText as the json structure has been stripped and it now looks something like this:

JSON
Raw Data
Headers
Save
Copy
Collapse All
Expand All

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

这个问题试图将我以前的问题简化为一个javascript问题.使用axios可能有更好的方法来做我想做的事情；请参阅处理axios请求返回的身份验证页面正在查看以获取更多详细信息.

This question tries to reduce my previous question down to a javascript problem. There may be a better way to do what I want using axios; see Handling an authentication page returned by an axios request in vue for more details.

推荐答案

一种解决方案是覆盖<form>的提交事件处理程序，然后使用

One solution is to override the <form>'s submit-event handler, and then use XMLHttpRequest to submit the form, which gives you access to the form's response data and status code. A status code of 200 implies that the user is authenticated, and the response data should contain the response of the original request before authentication.

步骤:

1. 在表单的容器中查询<form>元素:

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

添加一个submit事件处理程序，该处理程序调用

Add a submit-event handler that calls Event.preventDefault() to stop the submission:

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

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

Use XHR to send the original request, adding your own response handler to get the resulting data:

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))
})

查看全文