详解前端登录方式

1,447 阅读3分钟

登录态校验

第一步:客户端发送POST请求做登录态校验,服务器端检验用户名密码是否准确,如果正确则返回成功

第二步:客户端收到成功响应后,在本地手动设置cookie,存储登录成功,例如:isLogin=true

第三步:之后再访问页面,检测本地是否有isLogin的cookie信息,有表示已经登陆过了,无需再验证

  • 缺陷:不准确,不安全,cookie可以随便修改

客户端设置cookie

客户端设置cookie:会话存储

第一步:客户端发送POST请求登录,

第二步:服务器做账号密码验证,如果正确在响应头中设置session信息:Set-Cookie:connect.sid

第三步:客户端收到响应头中有Set-Cookie:connect.sid,会在缓存中存储一份

image.png

第四步:之后再访问页面,客户端会携带connect.sid请求校验,服务器会查找自己的session来看是否匹配成功

缺陷:

  • session中有信息则是登录,否则没登录
  • session容易丢失【过去时间、服务器重启,session信息就没有了】
  • 和cookie相关,它也容易丢失
  • 不利于服务器的分布式 优势:利用了cookie和服务器端的"猫腻",不需要前端自己设置cookie和传递cookie信息,所有会话存储式都局限于 服务器的分布式 以及 存储信息的稳定上

5519f8180b12af37e36fe426fec05d3.png

使用Token(常用)

Token 是服务端生成的一串字符串,以作为客户端请求的一个令牌。当第一次登录后,服务器会生成一个 Token 并返回给客户端,客户端后续访问时,只需带上这个 Token 即可完成身份认证。

登录机制:

  • 登录时,客户端通过用户名与密码请求登录
  • 服务端收到请求去验证用户名与密码
  • 验证通过,服务端会签发一个带签名的Token,再把这个Token以响应发给客户端
  • 客户端收到Token,存储到本地,如Cookie、SessionStorage、LocalStorage
  • 客户端每次像服务器请求API接口时候,都要带上Token
  • 服务端收到请求,验证Token,如果通过就返回数据,否则提示报错信息

实现流程

第一步:客户端向服务器发送登录请求,服务器进行校验: 账号密码如果正确:基于JWT算法,生成一个Token信息【含有密钥、登录者、过期日期等信息】,“服务器端不需要存储这个Token”

第二步:服务器手动把Token给客户端

image.png

第三步:客户端获取Token后,存储到本地:可以用localStorage、sessionStroage、vuex/redux...

第四步:再次访问首页时,需要手动将缓存的Token发给服务器端【基于axios的请拦截器】

image.png

第五步:服务器拿到Token后,再基于JWT反解析,验证它的有效性

优点:

  • 实时校验,要稳定以及有利于服务器分布
  • 无状态、可扩展:在客户端存储的Tokens是无状态的,并且能够被扩展。基于这种无状态和不存储Session信息,负载负载均衡器能够将用户信息从一个服务传到其他服务器上。
  • 安全性:请求中发送token而不再是发送cookie能够防止CSRF(跨站请求伪造)。即使在客户端使用cookie存储token,cookie也仅仅是一个存储机制而不是用于认证。不将信息存储在Session中,少了对session操作。
  • 时效: Token 下发之后,只要在生效时间之内,就一直有效,如果服务器端想收回此 Token 的权限,并不容易。如果失效,就会重新进行登录验证,服务器端会返回状态码401

缺点:性能略低[忽略],需要自己写代码。

798c56e36a3d40c3f4dbd46fe347cf4.png

SSO 单点登录

待学习补充...

OAuth 第三方登录

待学习补充...

前三种方式的对比

image.png