Java 使用ReactJS在Sprint引导中实现Spring安全性

我正在尝试使用SpringBoot和ReactJS使用SpringSecurity实现用户名和密码的基本登录身份验证。我试着在网上用几个例子来做这件事，但大部分都是关于JSP的，而没有关于ReactJS的。我可以用SpringSecurity的默认登录名来运行它，但是当我尝试使用ReactJS进行自定义登录页面时。我找不到做这件事的方法。非常感谢您的帮助或指点

**login.html**



 var App = React.createClass({

    getInitialState: function () {
           return {
            username: "",
            password: ""
            };
        },
        _onSubmit: function (event) {

            event.preventDefault();

              var data = {
                    username: this.state.username,
                    password: this.state.password
                }

                $.ajax({
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    type: "POST",
                    url: "/login",
                    data: JSON.stringify(data),
                    success: function(data){

                    }.bind(this),
                    error:function(data)
                    {
                        alert(data.responseJSON.message);
                    }
                });

        },
        _onUserNameChange: function (event) {
            this.setState({username: event.target.value});
        },
        _onPasswordChange: function (event) {
            this.setState({password: event.target.value});
        },
      render: function() {
    return (
      <Grommet.App>
        <Box pad='medium' align='center' >
          <Box pad={{ vertical: 'medium', horizontal: 'medium', between: 'medium' }} align='center'>
          </Box>
          <Box size='large' pad='medium'>
            <Section align='center' pad='small' separator='top'>
              <Label margin='none' uppercase={true}>Tool</Label>
            </Section>
          </Box>
          <Form pad='medium'>
            <FormField label='User Name' error={this.state.usernameError}>
              <input type='text' value={this.state.username} onChange={this._onUserNameChange} />
            </FormField>
            <FormField label='Password' value={this.state.password} onChange={this._onPasswordChange} error={this.state.passwordError}>
              <input type='password' />
            </FormField>
            <Footer pad={{ vertical: 'medium' }} direction='column'>
              <Button label='Login' primary={true} fill={true} onClick={this._onSubmit} type="submit" name="submit" />
            </Footer>
          </Form>
        </Box>
      </Grommet.App>
    );
      }

      });

        var element = document.getElementById('content');
        ReactDOM.render(React.createElement(App), element);




 **SecurityConfig.java**


 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
 import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
 import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter{

@Override
public void configure(HttpSecurity httpSecurity) throws Exception{
    httpSecurity.authorizeRequests()
        .antMatchers("/*").hasRole("USER")
        .and()
    .formLogin()
         .loginProcessingUrl("/login.html");
}

@Autowired
public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception{
    auth.inMemoryAuthentication()
        .withUser("user").password("password").roles("USER");

}

**login.html**
var App=React.createClass({
getInitialState:函数（）{
返回{
用户名：“”，
密码：“
};
},
_onSubmit：函数（事件）{
event.preventDefault（）；
风险值数据={
用户名：this.state.username，
密码：this.state.password
}
$.ajax({
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
类型：“POST”，
url:“/login”，
数据：JSON.stringify（数据），
成功：功能（数据）{
}.绑定（此），
错误：函数（数据）
{
警报（data.responseJSON.message）；
}
});
},
_onUserNameChange:函数（事件）{
this.setState（{username:event.target.value}）；
},
_onPasswordChange:函数（事件）{
this.setState（{密码：event.target.value}）；
},
render:function（）{
返回(
工具
);
}
});
var元素=document.getElementById（'content'）；
render（React.createElement（App），element）；
**SecurityConfig.java**
导入org.springframework.beans.factory.annotation.Autowired；
导入org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder；
导入org.springframework.security.config.annotation.web.builders.HttpSecurity；
导入org.springframework.security.config.annotation.web.configuration.EnableWebSecurity；
导入org.springframework.security.config.annotation.web.configuration.websecurityConfigureAdapter；
@启用Web安全性
公共类SecurityConfig扩展了WebSecurity配置适配器{
@凌驾
public void configure（HttpSecurity-HttpSecurity）引发异常{
httpSecurity.authorizeRequests（）
.antMatchers（“/*”）.hasRole（“用户”）
.及()
.formLogin（）
.loginProcessingUrl（“/login.html”）；
}
@自动连线
public void configureGlobal（AuthenticationManagerBuilder auth）引发异常{
auth.inMemoryAuthentication（）
.withUser（“用户”）。密码（“密码”）。角色（“用户”）；
}

---

}问题在于登录处理URL的路径：您正在将凭证从ReactJS发布到/LoginURL，但在spring安全配置中，您正在收听/Login.html

只需将配置更改为：

 .loginProcessingUrl("/login");

我想会好的。

---

祝你好运

你有什么问题？@aliakbarazizkhani我不知道如何使用reactjs/login-post让它工作。我看过JSP上的示例，但没有看到react。这可能会有所帮助