带有React的Spring安全登录页面
最后修改:2020年8月17日
1.概述
反应是Facebook构建的基于组件的JavaScript库。有了React，我们可以轻松地构建复杂的web应用程序。在本文中，我们将使Spring安全性与React登录页面一起工作。
我们将利用先前示例的现有Spring Security配置。所以我们将建立在上一篇关于创建一个的文章之上金宝搏官网188be使用Spring Security进行登录。
2.建立反应
首先，让我们使用命令行工具create-react-app创建应用程序通过执行命令"Create-React-App React“。
我们将有一个如下配置反应/ package.json:
{"name": "react": "0.1.0"， "private": true， "dependencies": {"react": "^16.4.1"， "react-dom": "^16.4.1"， "react-scripts": "1.1.4"}， "scripts": {"start": "react-scripts start"， "build": "react-scripts build"， "test": "react-scripts test——env=jsdom"， "eject": "react-scripts eject"}}然后，我们使用Frontend-Maven-Plugin帮助使用Maven建立我们的反应项目：
com.github.eirslett Frontend-Maven-Plugin <版本> 1.6 V8.11.3 6.1.0 SRC / Main / WebApp / Web-Inf / View / React <执行> Install节点和NPM <目标> <目标>安装 - 节点和NPM <执行> npm安装 npm <执行> npm运行build npm <参数>运行build 可以找到该插件的最新版本在这里。
当我们运行时MVN编译，这个插件会下载节点和NPM.，安装所有节点模块依赖并为我们构建react项目。
这里有几个配置属性需要解释。我们指定了的版本节点和NPM.，这样插件就知道该下载哪个版本了。
我们的反应登录页面将作为春季静态页面，所以我们使用“src / main /webapp/ web - inf /视图/反应“ 作为NPM.的工作目录。
3. Spring安全配置
在深入学习React组件之前，我们先更新一下Spring配置，以服务于我们的React应用的静态资源:
@EnableWebMvc @Configuration public class MvcConfig extends WebMvcConfigurerAdapter {@Override public void addResourceHandlers(ResourceHandlerRegistry注册表){registry. addresourcehandler ("/static/**") . addresourcellocations ("/WEB-INF/view/react/build/static/");registry.addResourceHandler(“/ * . js”).addResourceLocations (" / web - inf /视图/ /构建/反应”);registry.addResourceHandler(“/ * . json) .addResourceLocations (" / web - inf /视图/ /构建/反应”);registry.addResourceHandler(“/ *”ico) .addResourceLocations (" / web - inf /视图/ /构建/反应”);registry.addResourceHandler .addResourceLocations (" / index . html ") (" / web - inf /视图/反应/构建/ index . html”);}}请注意，我们添加登录页面“index . html”作为静态资源而不是动态服务的JSP。
接下来，我们更新Spring安全配置以允许访问这些静态资源。
而不是使用“login.jsp”就像我们在以前的表单登录文章，我们在使用“index . html”作为我们的登录页面:
@Configuration @EnableWebSecurity @Profile("!https") public class SecSecurityConfig extends WebSecurityConfigurerAdapter{//…@Override protected void configure(最终的HttpSecurity http) throws Exception {http.csrf().disable(). authorizerequests () //... .antMatchers(HttpMethod. HttpMethod)。GET， "/index*"， "/static/**"， "/*.js"， "/*.js"/*.ico . json"， ") .permitAll() .anyRequest().authenticated() .formLogin().loginPage("/index.html") .loginProcessingUrl("/perform_login") .defaultSuccessUrl("/homepage.html"，true) .failureUrl("/index.html?error=true") /…}}正如我们从上面的代码片段中看到的，当我们将表单数据发布到/ perform_login，春天会把我们引导到/ homepage.html"如果凭据成功匹配，并与"/ index . html ?错误= true“否则。
4.反应组件
现在让我们的手肮脏的反应。我们将使用组件构建和管理表单登录。
注意，我们将使用ES6 (ECMAScript 2015)语法构建我们的应用程序。
4.1。输入
我们从an开始输入组件支持<输入/ >登录表单的元素/ src / Input.js反应:
import PropTypes from 'prop-types' class Input extends Component {constructor(props){super(props) this. class (props){constructor(props){super(props) this. class (props));state = {value: props.value?道具。取值:“，className: props.className?”道具。className: "， error: false}} //…render () {const {handleError，…选择}=。道具。return (如上所示，我们包装<输入/ >元素进入反应控制组件，以便能够管理其状态并执行现场验证。
React提供了一种验证类型的方法proptype。具体来说,我们使用输入。proptype ={…}验证用户传入的属性类型。
请注意,PropType验证仅适用于开发。PropType验证是检查我们正在构成组件的所有假设是否正在满足。金宝搏官网188be
最好是有了它，而不是在生产过程中被随机的小问题吓到。
4.2。形式
接下来，我们将在文件中构建一个通用表单组件Form.js它将我们的输入组件，我们可以基于该组件创建登录表单。
在形式组件，我们取HTML的属性<输入/ >元素和创建输入从他们的组件。
然后输入组件和验证错误消息被插入形式:
import PropTypes from ` prop-types ` import Input from `。/Input' class Form extends Component{//…render() {const inputs = this.props.inputs。map(({name, placeholder, type, value, className}， index) => ( ) ) const errors = this.renderError() return ( ) } } Form.propTypes = { name: PropTypes.string, action: PropTypes.string, method: PropTypes.string, inputs: PropTypes.array, error: PropTypes.string } export default Form现在让我们看看如何管理字段验证错误和登录错误:
class Form extends Component {constructor(props) {super(props) if(props.error);状态={失败:'错误的用户名或密码!'， errcount: 0}} else {this。if(!field) return if(errmsg) {this.setState((prevState) => ({failure: "， errcount: prevState. "});errcount + 1, errmsgs:{…prevState。}} else {this.setState((prevState) => ({failure: "， errcount: prevState.errcount===1?0: prevState。errcount-1 errmsgs:{……prevState。errmsgs[字段 ]: ''} })) } } renderError = () => { 如果(this.state。return {errmsg}}} //…}在这个片段中，我们定义了HanderError.函数来管理窗体的错误状态。回想一下，我们还用它来输入字段验证。实际上，HANNELERROR（）被传递给输入组件的回调函数使成为（）功能。
我们用renderError ()构造错误消息元素。请注意,表单的构造函数使用一个错误财产。此属性指示登录操作是否失败。
然后是表单提交处理程序:
类表单扩展组件{// ... handlesubmit =（事件）=> {event.preventdefault（）（！this.state.errcount）{const data = new formdata（this.form）fetch（this.form.action，{方法：this.form.method，body：new urlsearchparams（data）}）.then（v => {if（v.redirected）window.location = v.url}）.catch（e => console.warn（e））}}}}我们将所有的表单字段打包到FormData并使用它将其发送到服务器拿来API。
我们不要忘记我们的登录表单有一个successUrl和failureUrl，意味着无论要求是否成功，响应都需要重定向。
这就是为什么我们需要在响应回调中处理重定向。
4.3。形式呈现
现在我们已经设置了所有需要的组件，可以继续将它们放入DOM中。基本的HTML结构如下(在下面找到它React / public / index.html）：
<！doctype html> <！ - ... - >
最后，我们将把表单渲染到id“容器”在/ src / index.js反应:
从“React-DOM”导入'中的导入反应从'。/格式'const inputs = [{name：“username”，占位符：“用户名”，键入：“Text“}，{名：”密码“，占位符：”密码“，类型：”password“}，{类型：”提交“，值：”提交“，classname：”btn“}] const props = {name：'loginform'，方法：'post'，action：'/ perform_login'，输入：const params = new urlsearchparams（window.location.search）acctdom.render（，document.getElementById（'容器'））
因此，我们的表单现在包含两个输入字段：用户名和密码和提交按钮。
在这里我们额外传递错误属性的形式组件因为我们要在重定向到失败URL后处理登录错误：/ index . html ?错误= true。
现在，我们已经使用React构建了一个Spring安全登录应用程序。我们最不应该做的就是逃跑MVN编译。
在此过程中，Maven插件将帮助构建我们的React应用程序并收集构建结果src / main / webapp / web - inf /视图/ /构建反应。
结论
在本文中，我们讨论了如何构建React登录应用程序，并让它与Spring安全后端交互。更复杂的应用程序将涉及状态转换和路由使用反应路由器或回来的，但这超出了本文的范围。
一如既往，可以找到完整的实现在github上。要在本地运行，请执行mvn jetty：运行在项目根文件夹中，我们可以访问React登录页面http://localhost:8080。
3.评论
最老的
评论在本文上关闭！
