前后端分离前端技术方案 第1篇
登录流程:
1、首次登录时，后端服务器判断用户账号密码正确之后，根据用户id、用户名、定义好的秘钥、过期时间生成 token ，返回给前端； 2、前端拿到后端返回的 token ,存储在浏览器的localStorage 里； 3、前端每次路由跳转，判断 localStorage 有无 token ，没有则跳转到登录页，有则请求获取用户信息，改变登录状态； 4、每次请求接口，在 Axios 请求头里携带 token; 5、后端接口判断请求头有无 token，没有或者 token 过期，返回标记信息；前端得到标记信息，重定向到登录页面;
登录成功后，将后端返回的token和loginUser存储在localStorage中。
后端生成一个token字符串作为key值，将登录的user转为json字符串作为value值。存储在redis服务器中，有效期30分钟，然后将这两个值返回给前端。前端接收到，使用localStorage保存到浏览器。
controller层:
Service层:
接下来，前端每次发送请求都要携带这个token值，需要判断通过是否存在token判断用户是否登录，之前使用cookie发起请求时是会自动携带所有cookie信息。
在前端页面加一个前置拦截器，就是发送任何请求前先执行这个前端拦截器函数，这里面主要从localStorage里获取token值，然后将其添加到请求头信息里 .每次发起请求 请求头中都会包含U-TOKEN 这个信息。
在中配置:
自定义拦截器LoginInterceptor:
添加配置ItsourceWebMvcConfigurer:
/user/*路径下的请求放行
此时请求到了（/user/login请求不会被拦截）后端拦截器，拦截器首先从请求头获取token值，如果为空，说明未登录，拦截请求并且返回｛success：false，message：noUser｝。 如果获取到token值，说明用户登录过，因为存储在前端localStorage的值是短时间内不会过期，除非手动清空缓存。但是保存在redis的该用户只在30分钟内有效。也就是常见的登录到一个页面长时间过后需要再次登录。此时根据前端传过来的token去redis服务器中获取值，如果没有获取到值，说明登录已过期。就拦截请求并且返回｛success：false，message：expireUser｝。如果获取到了值，就将token和获取到的value值（上次登录的用户）再次存储到redis服务器，刷新过期时间。
在中:
请求返回后，前端界面再配置一个后置拦截器，所有返回值都会先经过这个后置拦截器。拦截器判断success和message 如果是false和noUser就说明用户未登录，就跳转到登录界面。接下来再判断message的值是否是expireUser,如果是则 登录的用户已过期，就清空localStorage里面存储的数据，然后跳转到登录界面。如果用户已登录并且未过期，则将后端返回的result返回给前端调用接口的函数。
前后端分离前端技术方案 第2篇
我们都知道前后端分离的好处，前端和后端的工程师可以专注于做好自己的事情，这样能提高效率，效果也更好。那么，前后端分离前端部署方案是什么？我们以IBPS低代码开发平台为例来说，这样大家理解起来也更容易：
任何的研发都需要工程师积极探索，不断创新，才能在前人基础上有所突破。IBPS的研发工程师重新思考了前后端的定义，并引起了前端较熟悉的NodeJS，探索出了一条全新的前后端分离模式。我们来看看前端部署方案具体内容。
1、采用Webpack的模块打包机制
2、基于vue构建用户界面的渐进式框架，采用Vue全家桶（vue-router、vuex、vue-cli、axios）
3、基于vue的Element UI组件库和Vux的前端解决方案。
4、Easy mock 模拟后端数据结构。
5、同一套代码多端使用，即PC端、移动端可使用同一套前端代码。
6、控件组件化。
7、表单静态化，只需生成的代码其他系统可调用。
我们已经给大家说明了前后端分离前端部署方案的具体内容了，您了解了吗？
这是免费体验网址：
（部分资料来源于网络，如有侵权，请联系我们删除）
前后端分离前端技术方案 第3篇
这个问题在我们之前的文章里也有相关的阐述和介绍。前后端分离部署采用前端静态资源部署在服务器，然后需要nginx充当我们的前端静态文件代理服务器，然后后端使用jar包方式部署，还需要nginx的反向代理解决跨域问题，因为前后端分离项目前后端运行在不同的端口上就需要解决跨域的问题，需要在nginx里进行配置代理转发。
其实，前后端分离部署的方式还是有蛮多种的，比如：
第1种方式：可以将前端打包整合到后端部署。
第2种方式：可以使用tomcat部署（后端打war包+前端打dist包）。
第3种方式：可以使用tomcat+nginx部署(后端打war包+前端打dist包+nginx配置)。
第4种方式：可以使用jar+nginx部署（后端打jar包+前端打dist包+nginx配置）。
第5种方式：可以使用docker脚本一键部署。