一、是什么
js-cookienpm包是一个轻量级、简洁的JavaScript 库,用于处理cookies。
二、怎么用
import Cookies from 'js-cookie' const tokenStr = 'token' export function setToken(token) { return Cookies.set(tokenStr, 'xxx', { expires: 1, // 过期时间 path: '/', // 路径。默认就是 /,一般不用修改,表示整个网站所有页面都能访问这个 Cookie domain: '.xxx.com',// 域名。让子域名共享 Cookie secure: true, // 仅在 HTTPS 下传输 sameSite: 'strict' // 跨域安全策略 }); } export function getToken() { return Cookies.get(tokenStr) } export function removeToken() { return Cookies.remove(tokenStr) }三、注意事项
1、js-cookie 里设置的 Token(通过 Cookies.set('token', 'xxx')),是存在浏览器的 Cookie里,不是localStorage、不是sessionStorage,也不是内存。
2、expires 不传值,则是会话级 Cookie(关闭浏览器就会消失);也可以传日期对象expires:new Date(2026, 5, 30)
3、secure生产环境(https)必须开;本地开发(localhost)不要开,否则存不了,取不到
4、sameSite 控制跨域请求时是否携带 Cookie,用来防 CSRF 攻击。有三个值可选:
① sameSite: 'strict' (最严格)
只有同域名才带 Cookie
最安全,但跳转第三方登录后会失效
② sameSite: 'lax'(较均衡)
安全 + 实用平衡
链接跳转、GET 请求可以带 Cookie
绝大多数项目用这个
③ sameSite: 'none'
允许跨域携带 Cookie
必须搭配 secure: true
用于:前后端分离( secure: true )、跨域接口、第三方登录、微前端
5、path 默认写 / ,表示整个项目的页面都能访问这个 Cookie