前后端分离模式下的WEB 系统集成方案*

王 锋，刘俊波

（中国电子科技集团公司第30 研究所，四川 成都 610041）

0 引言

当前WEB 系统开发多采用前后端分离模式。前端组件化、工程化，后端数据化；前端实现人机交互逻辑，提供业务数据展示，后端为前端提供业务数据支撑；前后端通过RESTful 接口进行数据交互。这种模式下前后端架构分离，降低了人员要求，开发效率高，给系统设计与开发带来了极大便利。前后端分离后，一个系统被分割为了两个独立的工程。用户身份不同时，前端需要根据后端权限数据实现模块鉴权，同时在多个WEB 系统集成部署时，需要为这些系统提供统一的界面呈现，解决系统之间的页面组件互相调用、用户身份的单点登录、后端资源请求权限检测等问题。为此，本文设计了一种针对前后端分离模式下的WEB 系统集成方案。

1 总体架构

前后端分离模式下，前端和后端是独立架构，互不干涉。不同系统后端服务采用的语言、框架往往不同，如果要在这些不同系统内部实现统一模式的身份认证和权限检测，极其困难且代价太高。为此借用微服务的架构模型，在后端服务前面增加一个独立的API 网关模块[1]，专门为这些使用不同语言框架开发的系统解决如单点登录、资源鉴权等共性问题。

集成方案将系统分为前端展示层、中间接入层和后端业务服务层3 层，架构如图1 所示。展示层即为前后端分离后的纯前端，采用vue 框架。中间接入层为API 网关模块，通常部署在后端业务系统前面，负责用户身份认证、权限检测和路由转发等功能。API 网关与业务系统之间采用RESTful 进行交互[2]。后端业务逻辑层为业务系统的后端服务。

图1 总体架构

2 前端集成

WEB 前端已经从传统的MVC 模式进一步发展为MVVM 模式[3]。系统采用vue+vue-router+iview UI 搭建前端基础开发框架。vue 是一套用于构建用户界面的渐进式框架[4]，具有易用、灵活等特性，便于与第三方库和既有项目整合，是整个前端框架的技术核心。vue-router 是针对vue 开发的路由插件，作为vue 的官方的路由管理器，提供单页应用服务。iview UI 是一套基于vue 的高质量UI 组件，提供如表单控件、按钮、导航菜单、表格、对话框等常用组件，能够满足绝大部分WEB 应用场景。前后端交互请求工具采用axios，可以自定义拦截器、处理携带票据、cookie、自动取消请求、防止CSRF/XSRF 等功能。

2.1 组件引用

一个业务系统由许多业务组件构成，每个业务组件就是一个独立的模块，可以单独打包使用。组件可以进一步划分为更细小的组件，这里称为微组件。独立打包的微组件实际就是一个WEB widget，具有“高内聚、低耦合”的优点[5]。业务系统之间可以调用对方系统的组件来使用，如图2 所示。

图2 前端页面组件调用

采用vue-custom-element 进行业务组件封装。围绕vue 组件的小包装器，能够在vue、react、angular 这些前端框架中提供无缝的使用方式。页面中只需要引用相应的javaScript 文件，然后在HTML标签中引入相应的标记即可渲染出vue 组件，为不同业务系统组件的相互调用提供解决方案。

组件开发时，为方便每个业务组件单独打包，需要在项目中为该业务组件添加一个打包入口文件。该文件的命名方式应该与系统名称和业务名称相呼应。例如，某监控系统的设备管理模块对应的打包入口文件命名为monitor-dev，该业务组件打包后对应文件名称也为monitor-dev.js。在其他系统中如果需要引用该业务模块，引入monitor-dev.js 以及组件对应的HTML 标记即可。HTML 标记在组件的打包入口文件中定义，标记名称应该和入口名称保持一致，如vue.customElement(‘widget-monitordev’,Dev)，其中“widget”表示这个一个vue 微组件，monitor 表示该组件是监控系统所有，Dev 表示对应的vue 业务组件，在HTML 中引入＜widgetmonitor-dev>＜/widget-monitor-dev>标记对即可加载对应的业务组件。业务组件加载及工作流程如图3所示。

①登录系统；

②获取认证token，存储到sessionStorage；

③使用系统定义的组件加载方法，通过token加载业务系统b 的monitor_dev 组件；

④业务系统b 的组件加载接口向API 网关验证token 合法性；

⑤下载monitor_dev.js；

⑥Monitor_dev 组件使用token 向业务系统b 请求业务数据；

⑦业务系统b 的业务模块向API 网关验证token 合法性；

⑧业务系统b 向客户端组件返回业务数据。

图3 业务组件加载及工作流程

2.2 前端鉴权

前端鉴权存在两个方面的需求：一是用户是否具备组件显示执行权限；二是组件向后端发起数据请求时后端返回的权限结果处理。

针对组件在前端是否能够显示执行，需要根据后端给出的权限进行判别。基于vue 的标签指令自定义了一个权限判断指令v-permission，该指令会根据后端返回的用户接口请求白名单进行匹配，只有当该组件所使用接口在白名单中，组件才会被显示和执行。比如，一个设备添加按钮组件devadd，页面引用该标签时增加相应的v-permission指 令，＜widget-dev-add v-permission>＜/widget-devadd>，那么前端就会对组件显示进行权限鉴别。只有当前用户被允许使用设备添加接口时，该按钮才会在页面中显示出来，否则页面会隐藏此添加按钮。

组件向后端发起数据请求的权限结果处理，会通过axios 自定义拦截器实现。axios 拦截器分为请求前拦截和请求后拦截两种。由于请求结果是后端返回，所以使用请求后拦截。在这个拦截器中，针对请求结果的权限处理可以进行统一定义，使得系统集成时能有一个统一的异常处理模式，从而提高用户体验。

3 后端集成

后端采用一个专用的API 网关模块，负责业务系统注册、用户认证和资源访问鉴权等方面的集成业务，使得业务系统可以专注于业务开发。

3.1 系统注册

业务系统需要在API 网关上注册其基本信息和资源信息。基本信息应包括系统标识、系统地址和端口等；资源信息主要包括菜单定义及接口信息表；这些资源信息有规范化的格式，多采用xml 数据文件格式。API 网关拥有这些信息后，可以由管理员为用户访问配置资源授权。

3.2 用户认证

API 网关模块存在两种部署模式：一是所有业务系统部署在API 网关模块后面，资源请求必须通过API 网关模块转发，称为断路式部署模式；二是业务系统可能部署在API 网关模块外面，资源请求可以不经过网关直接到达业务系统，称为旁路式部署模式。无论选择哪种部署模式，在多个系统集成时都希望能实现单点登录模式，即一次登录认证后对多个业务系统都有效，访问其他业务系统时无需再次登录认证。针对这两种部署模式，为实现单点登录，对应有两种登录认证流程。

3.2.1 断路式部署认证

认证流程如图4 所示。

图4 断路式部署认证流程

A：浏览器发起认证登录；

B：API 网关认证（根据系统实际认证协议要求确定）成功后，基于JWT 格式生成认证票据及刷新票据，并返回给浏览器客户端，而浏览器客户端将认证票据及刷新票据存储在客户端（Session Storage）；

C：浏览器访问任意业务系统，带上认证票据，API 网关验证票据，解析出用户身份信息；

D：API 网关将请求及用户信息转发给相应业务系统。

3.2.2 旁路式部署认证

认证流程如图5 所示。

图5 旁路式部署认证流程

A：浏览器访问业务系统，认证登录；

B：业务系统将请求重定向到API 网关的认证地址；

C：浏览器向API 网关认证地址发起认证请求；

D：认证（根据系统实际认证协议要求确定）成功后，API 网关向浏览器客户端返回认证授权码；

E：浏览器将认证授权码返回给业务系统；

F：业务系统将认证授权码发送给API 网关认证，对授权码有效性进行验证；

G：API 网关验证授权码合法后生成认证票据及刷新票据，并将验证结果及票据返回给业务系统；

H：业务系统获得验证结果和票据后认证完成，将请求资源、认证票据和刷新票据返回给浏览器客户端。

3.3 资源鉴权

由于API 网关部署存在两种模式，因此资源访问鉴权也存在两种方式。

3.3.1 断路式部署模式鉴权

断路部署模式下，前端发起业务请求时需带上认证时返回的token 票据。API 网关接收请求后，先对token 合法性做验证，验证过程需要解析出对应的终端用户身份信息。验证成功后，基于该用户信息与需要访问的资源进行访问授权判断，判断完成后基于资源URI 进行路由转发，将用户信息和资源请求转发给最终的业务系统。

3.3.2 旁路式部署模式鉴权

旁路式部署模式下，前端发起资源请求首先到达业务系统。业务系统需要向API 网关验证请求中token 票据的合法性，API 网关将验证结果和票据解析出来的用户信息一并返回给业务系统。业务系统基于访问资源和用户信息，向API 网关发起资源访问鉴权，鉴权成功后再调用响应的业务处理模块向前端返回资源信息。

4 结语

本系统集成方案解决了前后端分离模式下多个业务系统集成部署时需要解决的各种问题，包括前端的页面统一框架、页面互相调用、页面鉴权处理等，以及后端服务的用户身份单点登录认证、资源访问权限检测等。采用本方案后，业务系统能专注于用户业务开发，集成部署简单方便且节约了成本，适用于前后端分离模式下各种语言和框架开发的WEB 系统。