前后端分离与不分离的登录方式解析

一、序言

1.1 起因

现在越来越流行前后端分离的方式进行开发了，做Web开发的，逃不掉的就是登录了，因为前后端分离登录与传统的方式不再相同，所以就想总结下它们各自的实现方式

1.2 什么是前后端不分离

前后端不分离也就是前端的页面是由后端进行渲染的，也就是前端的只负责写样式和JS，后端负责填充数据，前端代码里面混杂着后端代码，两者的耦合度非常高，就像JSP那样，这种实现就不容易维护，一旦除了问题前后端都得返工，开发效率低下；

1.3 什么是前后端分离

为了解决不分离情况下带来的弊端，把页面渲染数据这部分从后端手中抽离出来，交由前端去做，当然这里不是直接让他去干后端的代码，而是前端所有用到的数据都是后端通过异步接口的方式提供的，前端将数据通过ajax异步请求把数据拿到，然后负责展示即可。这样的好处就是，你前端不管想怎么改样式后端都不用管，因为里面没有了后端代码，你怎么改也不关后端的事情了

1.4 完全分离–Mock

上面分离确实是将前后端分离开了，但是还有一个问题，就是这样并没有提高太多效率，因为你前端开发的时候需要后端的数据接口才能完整开发，应对这样的情况，应运而生的Mock就起到了关键作用，Mock就是模拟后端的数据接口，需要什么数据都可以模拟出来，等到后面对接后端的时候只需要把Mock的接口地址换成真正的接口就地址就可以了，这样前端也就完全脱离了后端进行开发了

二、关于登录的必要概念

2.1 什么是session

session是一次浏览器和服务器交互的会话，在jsp中，作为一个内置对象存在。我的理解，就是当用户打开网页时，程序会在浏览器中开辟一段空间来存储作为session的存储，可以对一些用户信息进行保存。session就是一个会话级别的cokkie，外加服务器内存中的一组散列表。当关闭浏览器时，cookie会消失，session也就消失了，这个cookie不写在磁盘上，而是写在浏览器的缓存中。

2.2 session和cookie的区别

1. cookie数据存放在客户的浏览器中，session数据放在服务器上
2. cookie不是很安全，别人可以轻易的获取本地的cookie并获取相关信息进行欺诈
3. session有时间限制，会在设置的一定时间内保存到服务器上。
4. cookie有限制，单个为3k，一个站点在客户端存放的cookie不能超过3k

所以一般将登陆的用户信息保存到session上，以防被盗，如果是其他信息，可以放在cookie里面，如果考虑到服务器的性能，减轻压力，应该使用cookie

三、前后端不分离的登录实现方式

因为前后端不分离的情况下，我们可以基于Cookie和Session来实现登录；大致流程就是：

1. 前端发起登录请求
2. 后端验证是否登录成功，成功则记录一个Session，响应的时候把SessionID写入Cookie
3. 每次请求都会带着Cookie
4. 后端可以根据Cookie中的Session来确认你是否登录过，而保持登录状态

四、前后端分离情况下

4.1 有状态登录

分离的情况下，服务器也能为你写上Session到Cookie，但是对于Ajax默认对于跨域请求是不带Cookie的，这时候有两种解决方式，
1.设置ajax请求默认全部带上Cookie,并且后端开启跨域支持，
2.通过代理实现不跨域，开发阶段可以用Webpack的proxy，部署阶段可以用nginx的反向代理

4.2 无状态登录Token

什么叫无状态，也就是服务器不保存你的登录状态，不保存登录状态那服务器怎么知道你登陆了呢，原因很简单，就是Token里面保存了你的信息，就像这样

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHBpcmVUaW1lIjoxNTQ5NTU0NDUyLCJ1c2VyTmFtZSI6IuacveacqCIsInVzZXJJZCI6IjY2NiJ9.fiQKWuMTWbkfQ3dOozoJr13pJSmKnc5El4EBnKyU42o

用户每次请求时候带上这个，这个放在请求头里面，后端根据Token就能解析出来用户信息
当然生成这样的Token肯定得有时效性，一段时间自动过期保证安全

应用场景：
1.在分布式系统中，每个服务部署在的服务器都不一样，所以这个时候的服务器端Session就无效了，这个时候带着Token无论去哪个服务器去请求资源都能够解析用户信息
2.对于单点登录，就像京东一样，一次登录每个服务都相当于登录了