安全鉴权骨架需cookie、localstorage、indexeddb协同：cookie仅存httponly+secure+strict的短期session id；localstorage缓存解密后的非敏感状态；indexeddb结构化存储加密权限数据，三者隔离分工、事件驱动流转。
安全鉴权骨架不能只靠一种存储机制撑起来。Cookie、LocalStorage 和 IndexedDB 各有不可替代的角色：Cookie 负责“身份凭证的可信传递”，LocalStorage 承担“客户端状态的快速读取”，IndexedDB 则支撑“敏感上下文的结构化持久化”。三者分工明确、互不越界，才能构成真正稳健的前端鉴权基础。
Cookie：只存最小必要会话标识，强制 HttpOnly + Secure + SameSite=Strict
Cookie 不该存用户信息、token 内容或权限列表。它的唯一职责是携带一个短期、一次性、服务端签发的 session ID（如 sid=abc123），且必须满足三项硬性约束：
- HttpOnly：彻底阻断 JS 访问，防范 XSS 盗取凭证
- Secure：仅在 HTTPS 下传输，杜绝明文窃听
- SameSite=Strict（或至少 Lax）：防止跨站请求伪造（CSRF），避免第三方站点冒用会话
过期策略建议用 Max-Age=900（15 分钟），配合后端滑动续期；禁用 Expires 时间戳，避免客户端时钟偏差引发异常失效。
LocalStorage：缓存解密后的非敏感状态，禁止存原始 token 或密码
当用户登录成功，后端返回加密 token（如 JWT）后，前端可将其中 payload 部分解密（如用户 ID、角色、过期时间等）以 JSON 形式存入 localStorage，用于快速渲染菜单、按钮权限、头像昵称等 UI 状态：
- 示例：
localStorage.setItem('auth_state', JSON.stringify({uid: 'u789', role: 'admin', exp: 1747642080})) - 每次页面加载时读取该字段做本地权限快判，但所有关键操作（如提交订单、修改密码）仍需触发真实 API 校验
- 登出时同步清除：
localStorage.removeItem('auth_state')，不依赖自动清理
绝不允许把完整 JWT、refresh token 或 AES 密钥存进 localStorage —— 它们可被任意同源脚本读取，XSS 一击即溃。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
IndexedDB：存储需强一致性 & 多字段查询的授权上下文
当业务需要离线权限决策（如 PWA 场景）、审计日志本地暂存、或按角色+资源+动作三元组动态校验时，IndexedDB 是唯一可行选择：
- 建库
authDB，对象仓库permissions，主键为resource_id，并建立复合索引by_role_action（role + action） - 存入结构化权限记录：
{resource_id: "doc-101", role: "editor", action: "update", granted: true, updated_at: 1747641900} - 权限检查走 indexedDB.open → transaction → index.get()，异步但可控，支持事务回滚
注意：所有写入前必须由后端签名验证，IndexedDB 本身不加密，敏感字段（如用户手机号）应先 AES-GCM 加密再存。
协同机制：三者间不共享数据，只通过事件/状态机驱动流转
三类存储彼此隔离，不互相读写。它们通过统一的状态管理器协调：
- 登录成功 → 后端 Set-Cookie 写入 sid；前端解析 JWT 存 auth_state；批量写入权限到 permissions 仓库
- 每次 API 请求前 → 检查 Cookie 是否存在且未过期（服务端验证）；读取 auth_state 做前置 UI 过滤；需要细粒度判断时查 IndexedDB
- 登出或 token 失效 → 清除 Cookie（服务端 invalidate + 前端 document.cookie 覆盖）；清空 localStorage；删除 IndexedDB 全库
这种分层设计让攻击面大幅收窄：XSS 拿不到 Cookie，也拿不到加密后的权限数据；CSRF 因 SameSite 失效无法发起伪造请求；而离线场景下，IndexedDB 提供了可验证、可审计的本地授权依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
