基于前后端分离和Spring Security的用户登录功能的设计与实现*

宋馨来，张海涛

（重庆工程学院，重庆 400056）

由于使用B/S模式开发的项目具有无须安装即可使用和升级维护方便的优点，B/S模式逐渐超越C/S模式成为主流的应用程序开发模式。而使用Java开发Web应用程序又是B/S开发模式的主流方式。传统的Java Web应用程序开发基于Servlet技术，通常使用JSP+JavaBean+Servlet进行开发。这种开发模式存在以下缺点：

（1）对项目开发人员的技能要求高，项目开发周期较长。该开发模式下，通常开发人员不仅要设计与开发后台服务，还要负责前端页面的设计与开发，如果由专门的前端开发人员来开发前端页面，最后还需要将前端代码和后端代码融合并进行功能联调，这显然会增加开发时间降低开发速度。前后端拉通则要求开发人员熟练掌握前后端开发技术，会增加开发人员的技能学习成本，给开发人员带来沉重的负担。

（2）从项目维护和扩展的角度来说，随着网站流量的增加和项目架构的不断演进，项目势必要进行升级扩展和结构优化。传统的开发模式中前后端代码耦合在一起，造成代码的可读性以及可扩展性不高,给后期项目的维护和扩展增加了难度和成本，可能会影响项目的更新上线速度，降低网站的访问流量，对企业造成损失[1]。

前后端分离开发模式下，后台服务只负责提供数据、前端负责解析数据和页面渲染，后端开发人员负责业务和数据接口，前端开发人员负责展现和交互逻辑，前后端可以并行开发来提高开发效率，前后端分开部署则避免了职责不清晰导致的开发人员踢皮球问题，提高了问题定位效率，进而加快项目上线速度，有利于抢占市场[2]。

因前后端分离的开发模式较好地解决了传统的Java Web应用程序开发模式存在的对开发人员的技能要求高、开发周期较长和项目维护及扩展困难等问题，而逐渐兴起。

1 前后端分离模式

如果将Web页面当作前端，那么后端的功能就是提供数据，则可以将前后端分离模式简化，如图1所示。

图1 前后端分离架构示意图

前后端分别由专门的开发人员进行开发并且分开部署，分工明确，互不影响，可以准确判定问题是谁的，避免了前后端代码糅合在一起无法及时判定责任方而导致互相推诿的问题。

前后端交互可简化为前端通过URL调用后端API接口传递数据。当然，在软件开发之前，需要前后端的开发人员对API接口的访问路径、参数和返回数据的类型等协商达成一致。

2 用户登录功能的实现

后端采用SpringBoot+Spring Security安全框架，前端则采用目前比较流行的前端框架Vue.js，两者结合实现前后端分离[3]。

2.1 用户登录功能的后端实现

采用SpringBoot+Spring Security安全框架并且前后端不分离的情况下，实现用户登录功能是比较简单的，主要工作为编写表单登录页面和在Web Security Configuration的configure(HttpSecurity http)中配置表单认证，登录系统认证成功后会跳转到目标页面。在前后端分离时这种方法就行不通了，可在configure(HttpSecurity http)中添加自定义的登录过滤器来实现，前端根据后端返回的JSON数据确定登录成功与否，并由前端决定登录成功后如何跳转页面。关键代码如下：

2.2 用户登录功能的前端实现

前端采用Vue.js实现，Vue.js是一个轻量级的构建用户界面的渐进式JavaScript框架，其核心库只关注视图层，不仅简单易用，还便于与第三方库或既有项目整合，与工具链以及各种支持类库结合使用时，Vue.js也完全能够为复杂的单页应用提供驱动。

使用Vue CLI创建Vue项目，并结合Node.js实现了前端的部署，实现了前后端的完全分离。前端项目的关键代码如下：

登录页面Login.vue中处理用户登录的方法定义如下：

对登录请求的URL进行路由配置后，前端就可以通过axion发起HTTP请求访问后端API，然后根据后端返回的JSON数据进行前端渲染。

3 结束语

用户登录功能是Web应用程序的必备功能，虽然采用传统的Web应用程序开发技术也方便实现，但随着移动互联网的迅猛发展，后台服务在设计时不仅要考虑支持PC端还要考虑支持移动端。基于前后端分离和Spring Security来实现的用户登录功能，可方便后续支持接入移动端的用户登录功能和随着后台业务拓展带来的用户授权功能。