前端要理解的cookies和token的区别

最新推荐文章于 2025-10-15 15:45:33 发布

原创最新推荐文章于 2025-10-15 15:45:33 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #es6 #javascript

NodeJs 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了前端中常见的用户认证机制——cookies和JWT（JSON Web Tokens）的区别。cookies常用于保存session_id，但存在拓展性和跨域问题。JWT则通过在客户端存储经过签名的数据，实现了无状态认证，简化了服务器的session管理，但同时也带来了一些挑战，如无法中途撤销token、数据安全性等。文章详细解析了JWT的数据结构、签名过程及其优缺点，并提供了JWT在Node.js（Express）中的使用示例。

常用的cookie

互联网服务离不开用户认证，一般流程是下面这样：

用户向服务器发送用户名和密码
服务器验证通过后，在当前对话（session）里面保存相关数据，比如用户角色、登录时间等等（可以理解为保存在服务的一个session store中）
服务器向用户返回一个session_id，写入用户的Cookie
用户随后的每一次请求，都会通过Cookie，将session_id传回服务器
服务器收到session_id，找到前期保存的数据（可以理解为去session store中查找），由此而知用户的身份

这种模式的问题在于，拓展性不好。单机当然没有问题，如果是服务器集群，或者是跨域的服务导向架构，就要求session数据共享，每台服务器都能够读取session。

举个例子，A网站和B网站是同一家公司的关联服务，现在要求，用户只要在其中一个网站登录，再访问另外一个网站就会自动登录，请问如何实现？

一种解决方案是session数据持久化，写入数据库或别的持久层。各种服务收到请求后，都向持久层请求数据。这种方案的有优点是架构清晰，缺点是工程量比较大。另外如果持久层挂了，就会单点失败。

另一种方案是服务器索性不保存session数据了，所有数据都保存在客户端，每次请求都发回服务器。

JWT就是这种方案的一个代表。

JWT？

JWT的原理是，服务器认证后，生成一个JSON对象，发回给用户，就像下面这样

{
	"姓名": "张三",
	"角色": "管理员",
	"到期时间": "2022年3月24日22:46:32"
}

以后，用户与服务端通信的时候，都要发回这个JSON对象。服务器只靠这个对象认定用户身份，同时为了防止用户篡改数据，服务器在生成这个对象的时候，会加上签名（见后文）。

服务器就不保存任何session数据了，也就是说，服务器变成无状态了，从而笔记容易实现拓展。

JWT的数据结构

实际的JWT大概就像下面这样

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJ1c2VySWQiOiI2MjM5ZTU4MWFlNmVjZmM4ZTBhMDNjOTYiLCJpYXQiOjE2NDc5NjE0NzYsImV4cCI6MTY0ODA0Nzg3Nn0.
edkqlsbRY0s1ccAklVFBzufeCTKyPKhVcGslKh2YBt4

它是一个很长的字符串，中间用点（. ）分隔成三个部分，注意，JWT内部是没有换行的，这里知识为了方便展示，将它写成了几行。

JWT的三个部分一次如下：

Header（头部）
Payload（负载）
Signature（签名）

写成一行就是下面这样

Header.Payload.Signature

Header

header部分是一个JSON对象，描述JWT的原数据，通常是下面的这样子；

{
	"alg": "HS256",
	"typ": "JWT"
}

上面代码中，alg 属性表示签名的算法，默认是HMAC SHA256；
typ 属性表示这个令牌（token）的类型，JWT令牌统一写成JWT；
最后，将上面的JSON对象使用Base64URL算法转成字符串。

Payload

Payload部分也是一个JSON对象，用来存放实际需要传递的数据。JWT规定了7个官方字段供选用：

iss：签发人
exp：过期时间
sub：主题
aud：受众
nbf：生效时间
iat：签发时间
jti：编号

除了官方字段，你还可以在这个部分定义私有字段，下面就是一个例子。

{
 "sub": "1234567890",
 "name": "xia peng",
 "admin": true,
}

注意，JWT默认是不加密的，任何人都可以读到，所以不要把秘密信息放在这个部分。这个JSON对象也要使用Base64URL算法转成字符串。

Signature

Signature部分是对前两部分的签名，防止数据篡改。
首先，需要指定一个密钥（secret）。这个密钥只有服务器才知道，不能泄露给用户。然后使用Header里面指定的签名算法（默认是HMAC SHA256），按照下面的公示产生签名。

HMACSHA256(
	base64UrlEncode(header) + "." +
	base64UrlEncode(payload),
	secret
)

算出签名以后，把Header、payload、signature三个部分拼成一个字符串，每个部分直接用（.）分割，就可以返回给用户。
在JWT中，消息体是透明的，使用签名可以保证消息不被篡改，但不能实现数据加密功能

Base64URL

前面提到这个算法，其实这个算法和Base64算法基本类型，但是也有一些小的不同；
JWT作为一个令牌（token），有些场合可能会放到URL（比如xx.xx.com/?token=xx），Base64有三个字符+、/和=，在URL里面有特殊含义，所以要被替换掉： =被省略， +被替换成 -，/替换成_。这就是Base64URL算法。

JWT的使用方式

客户端收到服务器返回的JWT，可以存储在Cookie里面，也可以存储在localStorage。
次后，客户端每次与服务器通信，都要带上这个JWT。你可以把它放在Cookie里面自动发送，但是这样不能跨域，所以更好的做法是放在HTTP请求的头信息Authorization字段里面：

Authorizaiton: Bearer <token>

另一种做法是，跨域的时候，JWT就放在POST请求的数据体里面。

JWT的几个特点

JWT默认不加密，生成原始Token以后，跨域用密钥再加密一次
JWT不加密的情况下，不能把秘密数据写入JWT
JWT不仅可以用于认证，也可以用于交换信息。有效使用JWT，可以降低服务器查询数据库的次数
JWT的最大缺点是，由于服务器不保存session状态，因此无法在使用过程中废止某个token，或者更改token的权限。也就是说，一旦JWT签发了，在到期之前就会始终有效，除非服务器部署额外的逻辑
JWT本身包含了认证信息，一旦泄露，任何人都可以活的该令牌的所有权限。为了减少盗用，JWT的有效期应该设置得比较短。对于一些比较重要的权限，使用时应该再次对用户进行认证。
为了减少盗用，JWT不应该使用HTTP协议明码传输，要使用HTTPS协议传输。

下面贴出来JWT在node.js中的使用（express）

// jwt.js 封装的jwt方法
const jwt = require('jsonwebtoken')
const { promisify } = require('util')

exports.sign = promisify(jwt.sign)

exports.verify = promisify(jwt.verify)

// 不验证，直接去返回数据
exports.decode = promisify(jwt.decode)

// user.js 签发token
const jwt = require('../util/jwt')
const { jwtSecret } = require('../config/config.default')

// 用户登录
exports.login = async (req, res, next) => {
    try {
        // 1. 数据验证, validator中间件中已经做了
        // 并且在req.user上挂载了用户信息
        const user = req.user.toJSON()
        // 2. 生成 token
        const token = await jwt.sign({
            userId: user._id
        }, jwtSecret, {
            expiresIn: 60 * 60 * 24 // token的过期时间
        })
        // 3. 发生成功的响应(包含token的用户信息)
        delete user.password
        res.status(200).json({
            ...user,
            token
        })
    } catch (err) {
        next(err)
    }
}

// 验证token的中间件
const { verify } = require('../util/jwt')
const { jwtSecret } = require('../config/config.default')
const { User } = require('../model')

/**
 * 验证token是否有效，并挂载用户信息
 * @param {*} req 
 * @param {*} res 
 * @param {*} next 
 * @returns 
 */
module.exports = async (req, res, next) => {
    let token = req.headers['authorization']
    token = token ? token.split('Bearer ')[1] : null

    if (!token) {
        return res.status(401).end()
    }

    try {
        // verify方法会验证token是否有效 token是否过期
        const decodedToken = await verify(token, jwtSecret)
        // 认证完token 并将用户信息挂载在req.user上
        req.user = await User.findById(decodedToken.userId)
        next()
    } catch (err) {
        return res.status(401).end()
    }
}