Определить отправку формы на странице - PullRequest
Новая
       42

Определить отправку формы на странице

0 голосов
/ 22 февраля 2020

У меня есть приложение vue, которое находится за брандмауэром, который контролирует аутентификацию пользователя. Единственный способ определить, когда пользователю необходимо пройти повторную аутентификацию, - это когда запросы ax ios, отправленные моим приложением, получают ошибку 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\"

This вопрос пытается уменьшить мой предыдущий вопрос до проблемы javascript. Может быть лучший способ сделать то, что я хочу, используя axios; см. Обработка страницы аутентификации, возвращенной запросом ax ios в vue для получения дополнительной информации.

1 Ответ

0 голосов
/ 28 февраля 2020

Одним из решений является переопределение обработчика события отправки <form>, а затем использование XMLHttpRequest для отправки формы , которая дает вам доступ к данным ответа формы и коду состояния. Код состояния 200 подразумевает, что пользователь прошел проверку подлинности, и данные ответа должны содержать ответ исходного запроса перед проверкой подлинности.

Шаги:

  1. Запрос контейнера формы для элемента <form>: 

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

  2. Добавление обработчика события submit, который вызывает Event.preventDefault() чтобы остановить отправку: 

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

демо

...