Как аутентифицировать пользователей в приложении React.JS с помощью j_security_check

Я работаю над приложением, использующим ReactJS. Я буду запускать приложение на сервере TomCat и развертывать его с помощью Maven. Для прошлых приложений я использовал j_security_check для аутентификации пользователей и хотел бы аутентифицировать пользователей в приложении React таким же образом.

Моя проблема заключается в том, что я не знаю, как настроить файл web.xml для ограничения доступа и запроса входа в систему. Поскольку у React есть только один файл html и один файл js, как мне ограничить доступ и перенаправить на другой компонент? Нужно ли мне иметь отдельную HTML-страницу для входа в систему?

Если это нужно сделать программно, как мне настроить HttpRequest, чтобы сделать это безопасным? Я пробовал следующий код, но получаю ошибку 404 при попытке войти в систему.

handleSub(fields) {
  var xhttp = new XMLHttpRequest();
  xhttp.open("POST", "j_security_check", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("j_username=fields.username&j_password=fields.password");}

authentication reactjs j-security-check
person Bryan Bailey    schedule 20.07.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Для других, у которых возникла эта проблема, ниже показано, как мы добились правильной аутентификации.

При загрузке веб-сайта мы автоматически загружаем страницу входа. В componentDidMount мы вызываем функцию, которая отправляет XMLHttpRequest для получения файла, расположенного на сервере веб-сайтов. Путь к файлу ограничен на веб-сайтах web.xml, из-за чего он пытается пройти аутентификацию с помощью j_security_check. URL были удалены в целях безопасности.

callSecuredFile(){
var secure = new XMLHttpRequest();
var url = "/website_name/private/filename.txt";
secure.onreadystatechange = function(){
  if(secure.readyState === 4 && secure.status ===200){
    try{
      var verificationJSON = JSON.parse(secure.responseText);
      if(verificationJSON.loggedIn === true){
        ReactDOM.render( this.renderSite(document.getElementById('MainPage'));
      }
    }
    catch(e){
      console.log(e);
    }
  }
}.bind(this);
secure.open('GET', url, true);
secure.send();

}

Если пользователь уже прошел аутентификацию и имеет активный сеанс, страница входа будет удалена, а затем будет отображаться основной веб-сайт.

В противном случае пользователь войдет в систему со своими учетными данными, создав активную сессию и загрузив главную страницу.

person Bryan Bailey    schedule 14.09.2018