Question

我正在开发一个使用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");}

Answer 1

对于其他遇到此问题的人，下面是我们如何对其进行正确身份验证。

在加载网站时，我们会自动加载登录页面。在componentDidMount上，我们调用一个函数，该函数将XMLHttpRequest发送到位于网站服务器中的获取文件。网站web.xml中的文件路径受到限制，导致它尝试使用j_security_check进行身份验证。出于安全考虑，已删除了该网址。

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();

}

如果用户已经通过身份验证并拥有有效会话，则登录页面将被删除，然后将显示主要网站。

否则，用户将使用其凭据登录，创建活动会话并加载主页。

如何使用j_security_check在React.JS应用上对用户进行身份验证

1 个答案: