springboot vue 整合打造WEB/H5的几种方案和思考

由于我们之前的springboot+template html版本在H5方向开发成本和入手成本比较高，以企业微信为入口的H5不断有新需求涌入，原来的粗犷式java web实在是效率低，效果也不好。我这个javaer决定研究下当下流行的前端解决方案。在一番搜索之后，发下当前前端的解决方案（非APP方向）基本以PC(VUE+ElementUI)和H5（Vue+）为主。

PC部分暂时由于内网PC使用，升级需求不迫切，所以我主要锁定H5（Vue+Vant）。

在学习了一个月的Vue全家桶和Vant集成后，我们原来的H5（功能比较简单），已经完全在我的电脑上模拟完成了。剩下的就是和后台整合的问题。

搜索网上解决方案后，个人心里大概有所思路，着手搭建整合。

1、Vue项目中配置History路由模式。

2、临时新建springboot项目，将Vue打包后的文件放入static目录下，修改index.html中的js，css引用路径。

3、Controller中模拟简单的登录拦截和请求。

启动工程，访问首页，没有问题，点点其他，ok。好多网上文章到此就结束了，可是，正常的网页程序必须考虑登录认证、权限控制、数据控制、渗透安全。随手在浏览器地址栏输入一个不存在的地址，404；手动输入一个存在的vue路径，404。。？what?发生了神马？打开浏览器debug，查看手工输入url和鼠标点击vue页面的区别，得出结论：Vue是本地路由，浏览器url是网路请求。也许我对Vue不熟悉，造成笑话，但是，对于这个结果，我却得到一个结论，Vue和Springboot整合的项目不同于原来的Web应用，不能进行Vue路由的安全控制，因为路由根本不和后台交互。

这时候肯定有人diss我，Vue router可以实现，可是，真正的安全控制，一定是后台实现，而不是前台实现。为什么呢？因为，如果是普通用户，一般情况不涉及安全问题；如果是恶意者，那么前台本地的filter，就是一段代码能解决的问题。所以，Vue Router只能解决一些常见的本地filter问题，对于认证鉴权，渗透注入之类的得靠后台。当然，vue router也可以减轻url鉴权得工作，因为有一部分页面不用再通过后台filter了。

那么问题来了，如何处理Vue和后台的关系，这便成为了整合的具体方案关键。最起码，原始Web的url访问控制不能对本地路由进行过滤，所以，我们只能从其他方面入手，换句话说，就是只能从数据层面解决控制问题。那么我们就按方案来说：

1、springboot web模式。

具体做法就是上文说到的，将Vue打包后的dist放入springboot static目录，启动springboot作为服务端口，页面和api都由springboot管理。

2、前后端分离模式。

搭建独立的web服务，使用静态资源代理vue，由于跨域的问题，所以，需要在vue端口同时代理api服务。例如，拿Nginx代理vue静态资源为根路径80，代理其他服务为/api/xxx。这样，js请求就不发生跨域问题。

以上，就是两种常见的整合方案。接下来就是安全问题。

1、认证。

由于没有原来的login页面登录，所以需要后端提供api登录的方式。一般使用token认证之类的。当然，也有和我们一样使用企业微信（微信）登录的，这种的，可以先使用正常的非vue登录流程，认证成功后，return或redirect到vue的首页。

未认证的情况：方案一，vue首页url是通过controller控制的，所以不认证无法访问首页。方案二，由于静态vue的url的不可拦截性，用户可以直接访问首页，只能通过认证后的数据来鉴权控制。

2、鉴权。

上文说到，由于url不可拦截，所以，我们必须从页面组件到数据，涉及到用户权限的部分，必须从后台获取。举个例子，首页有5个模块，1-2属于角色A，3属于角色B，，4-5属于角色C。那如果Vue层直接全部绘制的话，不同角色登录首页都可看见，即使你再拦截一次，那用户也可以通过你的模块去猜测可能的路径。所以，尽量加载时，根据用户角色动态的绘制router或Nav。另外，对于后台请求，也必须携带认证后的token等信息进行接口访问。

对于springboot层，则需要配置filter进行认证层的验证。对于不同角色请求，从认证池中校验该角色是否有接口的请求权限。对于页面模块和菜单，需要通过模块配置表和角色表的关联关系，实现接口查询用户的模块和菜单。

3、数据权限。

认证完成后，后台记录用户的token或者session。下次请求通过token或session中的用户信息，注入到接口，api服务所有的数据操作必须携带用户信息进行数据筛选。防止接口篡改出来的用户信息。

4、报文安全。

统一由web api层的filter实现报文的过滤或验签解密。可以集成到api服务，或者通过网关实现（见我的另一篇文章）。这里啰嗦一下实现问题，因为request body的不可复制，所以springboot后台拦截请求必须重写request，然后去获取报文，执行验签、解密、然后需要检查XSS，SQL等攻击问题。

 

以上，就是我自己整合中的一点过程和思考，没有直接贴代码，因为涉及到的东西太多。Vue部分也是临时学习，不敢卖弄。springboot部分的，有时间把用户体系和安全部分写点文章描述一下。