jwt
- j 就是 JSON
- w 就是 web
- t 就是 Token，即加密字符串，就是一个 string
登录
推荐一篇 文章
解决登录的常见的方式就是 Session + Cookie。
- Cookie 是属于 HTTP 协议的，主要是用于 由服务器 server 向客户端 Client（Chrome/浏览器）发的一个 token ，
Set-Cookie：token，在后续客户端向同域名的服务器发请求时，请求头 header 中必须要带上这个 token 字段Cookie：token。 - Cookie 与 Local Storage 区别是 Cookie 是自动的，而 Local Storage 是手动的，需要写额外代码
- Session 一般是基于 Cookie 实现的技术，server 向 client 发送一串密文，用于区别用户，当 client 向 server 发请求时，因为 http 服务是无状态的，所以会带上那串密文，server 拿到那串密文后，会到内存或文件中找到与其对应的用户，用于识别是哪个用户发的请求。
Session 怎么用
client 向 server 发送 post/Seesion ,client 会自动得到一个 Cookie，client 向 server 再发一个 get/User，会自动带上这个 Cookie，然后后端会去找对应的 user 并发送 user 的所有信息给 client。
由于 Session + Cookie 的方式，是储存在 server 的内存或者文件中，而内存或文件需要占用 server 的资源，所以发明了 jwt 。
- jwt 的思路是 server 将含有用户信息的密文中发送到 client，client 对其进行解密，获取到密文中的用户信息，来识别用户。与 Session 的区别就是不需要 server 占用额外的资源。
jwt 的结构分为三部分(代码来自维基百科)
- Header 头
{
"alg":"HS256", // 算法类型
"typ":"JWT" // 类型 用于登录还是刷新等
}
- Payload 体 (JSON)
// 重要数据
{
"loggedInAs":"admin", // 用户
"iat":1422779638
}
- Signature 密文
HMAC_SHA256(
secret, // 私钥
base64urlEncoding(header) + '.' +
base64urlEncoding(payload)
)
最终生成的
const token = base64urlEncoding(header) + '.' + base64urlEncoding(payload) + '.' + base64urlEncoding(signature)
jwt 怎么用
client 向 server 发了一个 post/JWT ,server 会发送一串密文给 client，也就是
const token = base64urlEncoding(header) + '.' + base64urlEncoding(payload) + '.' + base64urlEncoding(signature)
然后
- 前端需要将拿到的
jwt手动的存到locaStorage里 - 配置一下
axios，在每次请求的header都带有这个jwt，一般可以写在Authorization这个字段中。
class Http {
instance: AxiosInstance
constructor(baseURL: string) {
this.instance = axios.create({
baseURL,
})
}
}
const http = new Http('请求的网址')
http.instance.interceptors.request.use((config) => {
const jwt = localStorage.getItem('jwt')
if (jwt) {
;(config.headers as AxiosHeaders).set('Authorization', `Bearer ${jwt}`)
}
- 前端发请求，
get/User,后端就会看这个Authorization字段中有没有jwt，有的话就会去进行解密，看一下jwt中signature部分的用户信息，跟 payload 中的用户信息是否一致，成功后，就会从数据库中找到对应的用户，发送对应的 JSON 文件给前端
