介绍前端面试常问的三大登录方式

面试被问了无数次，值得总结一番

主要有以下三种方式

• Cookie + Session 登录
• Token 登录
• SSO 单点登录

Session 登录

初识

• HTTP 是无状态协议，每次和后端重新建立连接的话，后端无法判断请求是否每次来自于同一个用户，所以诞生了 cookie，会随 HTTP 请求一起发送
• cookie 携带了用户信息，但后端还需要验证，得通过 session 对象。而 session 存储了一些用户信息，存在后端是避免前端存储敏感数据。通常存在缓存里，比如 jvm 本地缓存、redis 分布式缓存

流程

• 首次登录：用户输入账号密码，前端发 HTTP 请求，后端验证时会创建 sessionId，并保存 sessionId 和 session 的映射关系，然后通过 Set-Cookie 头将 sessionId 种到 Cookie 中，存到前端

• 后续登录：请求携带包含了 sessionId 的 cookie 到后端，后端比较 sessionId 即可判断是哪个用户发的请求

• 浅谈响应首部 Set-Cookie 用法（知道可跳过）

  // 基本用法
  Set-Cookie: <cookie-name>=<cookie-value>
  
  // MDN 用例
  // 告诉前端存 cookie
  HTTP/2.0 200 OK
  Content-Type: text/html
  Set-Cookie: yummy_cookie=choco
  Set-Cookie: tasty_cookie=strawberry
  
  [path content]
  
  // 每次前端发起请求，携带的 Cookie 头
  GET/sample_page.html HTTP/2.0
  Host: www.example.org
  Cookie: yummy_cookie=choco;tasty_cookie=strawberry
  

缺点

• 存储了大量 session，一旦访问量激增，服务器压力大，维护成本高

Token 登录

该登录完美解决了后端压力大的问题，因为 token （令牌）与 session 相反，保存在前端

初识

• token 是后端生成的一串字符串。第一次登录时，后端生成一个 token 返回给前端，前端后续访问时携带 token 进行身份验证即可

流程

• 首次登录：用户输入账号密码，前端发 HTTP 请求，后端收到后（一般）以 JWT 形式生成 token，然后返还给客户端，前端收到存储在本地（cookie、localStorage）
• 后续登录：请求会携带 token

token 详解

• 先得讲讲 JWT（JSON Web Token）

  • 一个很长的字符串，由 “.” 分隔成三个部分——Header(头部)、Payload(负载)、Signature(签名)，拼凑成如 xxxx.yyyy.zzzz

  • // 官方举例
    // Header JSON对象
    {
    	"alg": "HS256", // 签名算法
    	"typ": "JWT" // JWT 类型（一般）
    }
    
    // Payload JSON对象  可以存一些信息，有7个官方字段，也可以自定义字段
    {
    	"sub": "1234567890",
    	"name": "John Doe",
    	"admin": "true"
    }
    
    // Signature 是对前两部分的签名，一般用 HMAC SHA256 算法
    // 同时还得提供一个密钥，只有后端知道，然后按如下方式签名
    HMACSHA256(
    	base64UrlEncode(header) + "." +
    	base64UrlEncode(payload),
    	secret)
    

  • 更详细的可以参考官网JSON Web Token Introduction - jwt.io

• token 可以放在 cookie 里发送，但这样没法跨域，更好的方法是放在请求头字段 Authorizatoin 里（或者放在 POST 请求的数据体里）

  • Authorization: Bearer <token>
    

优缺点

• 优点
  • 可以避开同源策略
  • 避免 CSRF 攻击
  • token 无状态，多个服务器可共享
• 缺点
  • 后端无法将 token 作废，只能等 token 达到设定的过期时间

浅谈SSO 单点登录

具体实现还是有些复杂的，而且方式也不止一种，展开说可以再写一篇文章了

初识

• 在多个应用系统中，用户只需登录一次，即可访问所有相互信任的应用系统。举例：阿里巴巴旗下有阿里巴巴、淘宝、阿里妈妈等应用，登录淘宝之后，再访问另外的应用无需再次登录

流程

• 首次登录
  • 用户首次访问网站 a.com 页面，未登录则携带地址参数重定向到 sso 认证中心，用户输入账号密码验证成功，则认证中心生成令牌 token 通过 Set-Cookie 种入 cookie，返回 a.com
  • a.com 收到 token 后会再去认证中心确认一次是否为真（防篡改），为真则登录成功，同时后端会将登陆信息写入 cookie 返回给前端，此时前端保存了 a.com 和 sso 的登录态
• 后续登陆
  • 若用户访文 a.com 下的页面，则会直接登录成功
  • 若用户访问 b.com，cookie 被携带跳转到认证中心，会检测出已登录状态，则直接下发 token 并返回 b.com，实现登录

如果觉得对你有帮助的话，点个赞呗~

反正发文又不赚钱，交个朋友呗~

如需转载，请注明出处foolBirdd