前端鉴权必须了解的 5 个兄弟：cookie、session、token、jwt、单点登录(1)

点击“终码一生”，关注，置顶公众号

每日技术干货，第一时间送达！

本文你将看到：

• 基于 HTTP 的前端鉴权背景

• cookie 为什么是最方便的存储方案，有哪些操作 cookie 的方式

• session 方案是如何实现的，存在哪些问题

• token 方案是如何实现的，如何进行编码和防篡改？jwt 是做什么的？refresh token 的实现和意义

• session 和 token 有什么异同和优缺点

• 单点登录是什么？实现思路和在浏览器下的处理

1、从状态说起

---

HTTP 无状态

我们知道，HTTP 是无状态的。也就是说，HTTP 请求方和响应方间无法维护状态，都是一次性的，它不知道前后的请求都发生了什么。但有的场景下，我们需要维护状态。最典型的，一个用户登陆微博，发布、关注、评论，都应是在登录后的用户状态下的。

标记

那解决办法是什么呢？::标记::。

在学校或公司，入学入职那一天起，会录入你的身份、账户信息，然后给你发个卡，今后在园区内，你的门禁、打卡、消费都只需要刷这张卡。

前端存储

这就涉及到一发、一存、一带，发好办，登陆接口直接返回给前端，存储就需要前端想办法了。

前提是，你要把卡带在身上。

前端的存储方式有很多。

• 最矬的，挂到全局变量上，但这是个「体验卡」，一次刷新页面就没了

• 高端点的，存到 cookie、localStorage 等里，这属于「会员卡」，无论怎么刷新，只要浏览器没清掉或者过期，就一直拿着这个状态。

前端存储这里不展开了。有地方存了，请求的时候就可以拼到参数里带给接口了。

2、基石：cookie

---

可是前端好麻烦啊，又要自己存，又要想办法带出去，有没有不用操心的？

有，cookie。cookie 也是前端存储的一种，但相比于 localStorage 等其他方式，借助 HTTP 头、浏览器能力，cookie 可以做到前端无感知。一般过程是这样的：

• 在提供标记的接口，通过 HTTP 返回头的 Set-Cookie 字段，直接「种」到浏览器上

• 浏览器发起请求时，会自动把 cookie 通过 HTTP 请求头的 Cookie 字段，带给接口

配置：Domain / Path

你不能拿清华的校园卡进北大。

cookie 是要限制::「空间范围」::的，通过 Domain（域）/ Path（路径）两级。

Domain属性指定浏览器发出 HTTP 请求时