news 2026/10/15 6:55:06

浏览器本地存储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/10/15 1:20:49

Java深度学习框架Omega-AI:企业级AI开发终极解决方案

Java深度学习框架Omega-AI&#xff1a;企业级AI开发终极解决方案 【免费下载链接】omega-ai Omega-AI&#xff1a;基于java打造的深度学习框架&#xff0c;帮助你快速搭建神经网络&#xff0c;实现模型推理与训练&#xff0c;引擎支持自动求导&#xff0c;多线程与GPU运算&…

作者头像 李华
网站建设 2026/10/15 3:14:03

DeepSeek-V3模型性能调优终极指南:从基础配置到高效部署

DeepSeek-V3模型性能调优终极指南&#xff1a;从基础配置到高效部署 【免费下载链接】DeepSeek-V3 项目地址: https://gitcode.com/GitHub_Trending/de/DeepSeek-V3 DeepSeek-V3作为当前最强大的开源大语言模型&#xff0c;以其671B总参数和37B激活参数的混合专家架构&…

作者头像 李华
网站建设 2026/10/15 2:25:05

从“开题焦虑”到“智能启航”:PaperXie领衔九大AI开题报告工具全景图谱——一场以科研逻辑为锚点的工具理性探索

paperxie-AI官网免费论文查重复率AIGC检测/开题报告/文献综述/论文初稿 https://www.paperxie.cn/ai/openingReporthttps://www.paperxie.cn/ai/openingReport 引言&#xff1a;开题不是“写文档”&#xff0c;而是一场“科研预演” 在当代研究生教育体系中&#xff0c;开题报…

作者头像 李华
网站建设 2026/10/14 19:03:56

OpenSCA-cli终极使用指南:从安装到实战

OpenSCA-cli终极使用指南&#xff1a;从安装到实战 【免费下载链接】OpenSCA-cli OpenSCA 是一款开源的软件成分分析工具&#xff0c;用于扫描项目的开源组件依赖、漏洞及许可证信息&#xff0c;为企业及个人用户提供低成本、高精度、稳定易用的开源软件供应链安全解决方案。 …

作者头像 李华
网站建设 2026/10/14 23:57:31

37、深入解析 Linux 系统安全防护策略

深入解析 Linux 系统安全防护策略 1. 引言 在当今数字化时代,Linux 系统凭借其开源、稳定、高效等特性,被广泛应用于各种领域。然而,随着网络攻击的日益猖獗,Linux 系统的安全问题变得尤为重要。本文将详细介绍 Linux 系统安全的多个方面,并提供相应的防护措施。 2. 基…

作者头像 李华
网站建设 2026/10/14 12:50:03

40、Linux 系统故障排除指南

Linux 系统故障排除指南 在 Linux 系统管理中,故障排除是一项至关重要的技能。当系统进程或应用程序停止运行,用户无法正常工作时,管理员必须尽快解决问题。本文将为你介绍 Linux 故障排除的基础知识、最佳实践方法以及可用的故障排除资源。 一、故障识别与定位 在进行故…

作者头像 李华