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

Posted 2023-02-22

【中文标题】如何使用 j_security_check 在 React.JS 应用程序上对用户进行身份验证

【英文标题】：How to authenticate users on a React.JS app using j_security_check

【发布时间】：2018-12-28 06:43:39

【问题描述】：

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

【参考方案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();

如果用户已经通过身份验证并且有一个活动会话，那么登录页面将被删除，然后将呈现主网站。

否则用户将使用他们的凭据登录，创建一个活动会话并加载主页。