news 2026/7/7 20:54:52

浏览器本地存储Cookie, local/sessionStorage - Token结合Cookie实现登录管理

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
浏览器本地存储Cookie, local/sessionStorage - Token结合Cookie实现登录管理

不需要走网络、不会影响资源的加载流程

Cookie

Cookie 是浏览器用来存储少量文本数据的小型文件 (≤ 4KB),每次发送请求的时候都会自动携带和这个域名关联的 Cookie,主要用于例如

会话管理(Session ID)、登录状态(SSO):方便服务器端识别是谁

个性化设置,如

theme=dark language=zh

跨站跟踪,例如页面中嵌入了广告商的 img ,广告商域名会设置自己的 Cookie ,当访问另一个同域的网站时就能识别出是同一个用户

内容

Cookie 存储在浏览器内部,每个域名都有自己Cookie的

  • 名称
  • 过期时间
  • 安全属性

浏览器会自动管理它们,开发者无法指定目录存放位置

生命周期

Cookie有两种

1. 会话 Cookie ( Session Cookie )

没有设置 expires 或max-age,当浏览器关闭时自动删除

2. 持久化 Cookie ( Persistent Cookie )

设置了过期时间,到时候会自动删除,例如

Set-Cookie: token=abc123; Max-Age=3600

Max-Age 的单位是 秒 ,表示一个小时后自动删除

Cookie 是如何跟随请求的

例如服务器创建Cookie并返回

Set-Cookie: session_id=xyz; HttpOnly; Secure; Path=/;

那么浏览器自动存储和管理,之后访问同域名页面时会自动携带

Cookie: session_id=xyz

安全隐患

Cookie 被偷走或者滥用都是无感的

1. XSS

在页面中注入 JS ,读取

document.cookie

但是不能读 HttpOnly 的:开启后只能服务器使用、防止JS读Cookie

如果被读到了 session_id 或 token 那登录态就泄露了,对方可以直接设置同样的 Cookie 然后伪装身份进行登录,即会话挟持

2. CSRF

利用请求同域时会自动带上Cookie的特性

例如之前你登录过 bank.com ,后面你不小心点击了 bank.com/transer 导致能拿到你的 Cookie 然后识别你的身份进行了操作

  1. 可以通过设置SameSite = Strict任何跨站都不带 Cookie,

    或者设置为Lax,那么跳转进来是可以携带的

  2. 在敏感信息上设置一个隐藏的随机 token ,例如

    <input type = "hidden" name = "csrf_token" value = "xxxx">

    每次 POST/操作请求 都必须带上这个 token,服务器验证 token 是否匹配、是否过期

重要属性

1. secure

确保 Cookie 只能在 HTTPS下传输,防止 HTTP 明文环境被窃听

2. HttpOnly

3. SameSite

4. Path

指定 Cookie 作用的路径,例如 Path=/a 那么只有在 /a 时会发送 Cookie

5. Domain

限制 Cookie 生效范围

例如设置了 Domain = k.com,

那么 a.k.com 和 b.k.com 都能拿到

Token结合Cookie实现登录管理

1. 长短期双Token - 前后端分离

短期令牌 Access Token 放在前端例如 localStorage 中

长期令牌 Refresh Token 放在 HttpOnly Cookie 中供服务器端使用(防XSS),且开启 Secure

  1. 登录

    1. 前端发送 POST 请求
    2. 服务器验证成功后返回 长期令牌
    Set-Cookie: refresh_token=xxx; HttpOnly; Secure; SameSite=Lax; Max-Age=7d

    浏览器自动放到 Cookie 中;

    并在 响应体 中返回 短期令牌

    { "access_token": "xxx", "expire_in": 900 }

    前端保存到内存(JS变量)或者 localStorage 中

  2. 调用业务 API 时,请求手动携带 Access Token

    GET /api/userinfo Authorization: Bearer ACCESS_TOKEN
    1. 没有过期的话直接服务器验证然后返回
    2. 如果服务器返回401表示短期令牌 Access Token 过期了,那么前端立即调用 POST /api/refresh_token 携带上 长期令牌 refresh_token 去请求,服务器端验证长期令牌成功后会在响应体中返回新的 短期令牌 ,前端更新 Access Token
    3. 如果返回403表示长期令牌也过期了,那么就需要重新登录

2. 所有 Token 都放在 HttpOnly Cookie 中

  1. 在登录后服务器返回 Cookie
  2. 前端访问 API 的时候,不用手动个携带信息(Cookie请求时自动携带了
  3. 后端直接从 Cookie 中读取 token 进行验证

需要注意 CSRF ,得打开 SameSite 为 Strict 或 Lax

3. 传统 Session 模式

Cookie 只存 sessionId , Token 由服务器端管理

  1. 登录后服务器返回 Cookie 是 SessionId
  2. 前端每次请求都会携带这个 SessionId Cookie

如果 Cookie 是 Session 会话级的,那么页面关闭就需要再次登录请求

如果是 持久化 Cookie 的话就看过期时间

SSO单点登录 - cookie

浏览器端自动附带凭证的唯一可靠机制就是 Cookie浏览器不会自动携带 localStorage 、sessionStorage、IndexedDB 的数据

4KB

所以要实现自动登陆、无感跳转本质就只有 Cookie 能进行验证

开启 SameSite = None; Secure

localStorage、SessionStorage

5MB

是浏览器暴露给 JS 的持久化存储方式,通过键值对形式进行管理,属于 Web Storage ,无法像缓存一样参与资源加载

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/7 15:25:04

攻克OpenVLA模型微调中的归一化陷阱:实战指南与解决方案

在机器人视觉语言动作模型的实际应用中&#xff0c;OpenVLA模型微调后的推理阶段常常隐藏着一个技术陷阱——归一化问题。这不仅是理论概念&#xff0c;更是影响模型部署成功的关键因素。本文将带你深入理解这一机制&#xff0c;并提供切实可行的解决方案。 【免费下载链接】op…

作者头像 李华
网站建设 2026/7/7 8:29:54

java计算机毕业设计人力资源管理系统的设计与实现 基于SpringBoot的企业人事综合管理平台研发 面向中小企业的智能人事与考勤一体化系统

计算机毕业设计人力资源管理系统的设计与实现6c3x69&#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。当“人力”成为企业最昂贵的资产&#xff0c;传统Excel纸质审批的模式就像老牛…

作者头像 李华
网站建设 2026/7/7 8:13:41

Rust语言学习笔记

本文假设你已经学过cpp语言咧变量部分变量可以自动推断类型。变量默认不可改&#xff0c;可改变量要用let mut 进行声明&#xff0c;同名可以进行遮蔽&#xff0c;不限类型。变量类型用 &#xff1a;i32这种在let或者let mut 后进行声明。元组VS数组&#xff1a;元组是任意变量…

作者头像 李华
网站建设 2026/7/7 16:12:54

算法题 设计哈希映射

设计哈希映射 问题描述 不使用任何内建的哈希表库设计一个哈希映射&#xff08;HashMap&#xff09;。 实现 MyHashMap 类&#xff1a; void put(int key, int value) 向哈希映射中插入键值对 (key, value)。如果键已经存在&#xff0c;更新对应的值。int get(int key) 返回特定…

作者头像 李华
网站建设 2026/7/7 12:38:24

PaperXie 如何重塑开题报告的“研究可行性蓝图”属性:一种面向“从构想到落地”闭环构建的智能协作框架——一位研究生的真实实践记录

paperxie-AI官网免费论文查重复率AIGC检测/开题报告/文献综述/论文初稿 https://www.paperxie.cn/ai/openingReporthttps://www.paperxie.cn/ai/openingReport 在研究生培养体系中&#xff0c;开题报告常被视为一项形式化的行政程序。然而&#xff0c;从学术本质来看&#xf…

作者头像 李华
网站建设 2026/7/7 20:05:32

单片机stm32系列——PWM配置应用LED呼吸灯,搭配stm32cubeMX+keil5

1.配置TIM3&#xff0c;设置为内部时钟源&#xff0c;使用CH1通道&#xff0c;会在固定输出PA6引脚口2.打开TIM3中断向量管理器NVIC的使能3.生成代码裸机开发4.打开keil5工程&#xff0c;发现在多了一个tim.c文件&#xff0c;里面就配置了TIM3配置及PWM的配置5.主函数前启动PWM…

作者头像 李华