阶段五：HttpOnly Cookie 登录持久化-北京尧图网络

从零构建带AI流式对话的Vue2全栈应用-CSDN博客本文是对这篇文章阶段五的讲解一、阶段五为什么要改 Token 保存方式阶段四Token 保存在 Vuex 前端 JavaScript 可以读取 Token 刷新后 Token 消失阶段五Token 保存在 HttpOnly Cookie JavaScript 不能读取 Token 浏览器自动携带 Cookie 刷新后可以恢复登录二、Cookie 是什么Cookie 是浏览器保存的一小段数据。服务器返回Set-Cookie: session_tokenabc123浏览器保存后之后访问同一个网站会自动发送Cookie: session_tokenabc123前端页面不需要自己把 Token 加到请求头。三、cookie-parser安装npm install cookie-parser代码const cookieParser require(cookie-parser) app.use(cookieParser())它会把请求 Cookie 解析到req.cookies例如req.cookies.session_token可以获取会话 Token。四、Cookie 配置const sessionCookieOptions { httpOnly: true, secure: false, sameSite: lax, path: /, maxAge: 24 * 60 * 60 * 1000 }1.httpOnlyhttpOnly: true表示前端 JavaScript 不能读取这个 Cookie。下面代码读不到会话 Tokendocument.cookie这样可以降低恶意脚本直接窃取 Token 的风险。2.securesecure: false表示 HTTP 也允许发送 Cookie。本地项目使用http://localhost所以必须暂时是false。正式上线使用 HTTPS 时应该改为secure: true3.sameSitesameSite: lax用于限制跨网站请求携带 Cookie。它可以减少一部分 CSRF 风险。4.pathpath: /表示这个 Cookie 对整个网站路径都有效。包括/api/users /api/auth/me /api/ai/stream5.maxAgemaxAge: 24 * 60 * 60 * 1000计算过程24 小时 × 60 分钟 × 60 秒 × 1000 毫秒所以保存 24 小时。五、登录成功设置 Cookieres.cookie( SESSION_COOKIE_NAME, token, sessionCookieOptions )可以理解成让响应头包含Set-Cookie: session_tokentoken内容然后后端只返回用户res.json({ code: 0, data: { user: codeRecord.user } })不再返回token因为前端不应该读取 HttpOnly Token。六、阶段五鉴权中间件const token req.cookies[SESSION_COOKIE_NAME]不再读取req.headers.authorization而是读取 Cookie。完整流程浏览器请求 /api/users ↓ 自动携带 Cookie ↓ cookie-parser 解析 ↓ req.cookies.session_token ↓ loginSessions.get(token) ↓ 找到当前用户 ↓ next()七、为什么还需要后端loginSessionsCookie 中只保存一个随机 Tokenabc123真正用户信息保存在后端loginSessions.set(token, { user: mockWechatUser, expiresAt: ... })对应关系abc123 ↓ 微信学习者不能只相信浏览器自己传来的用户名称。应该由后端根据 Token 查找真实用户。八、/api/auth/me的作用刷新页面后Vuex 中currentUser null但浏览器可能仍有有效 Cookie。前端调用GET /api/auth/me浏览器自动带 Cookie。后端返回req.currentUser前端重新把用户放进 Vuex。所以刷新页面 ↓ Vuex 清空 ↓ 调用 /api/auth/me ↓ Cookie 仍有效 ↓ 后端返回用户 ↓ Vuex 恢复 currentUser九、authChecked为什么必要Vuexstate: { currentUser: null, authChecked: false }页面刚启动时currentUser null此时不能立即判断用户没登录因为还没有检查 Cookie。所以增加authChecked含义false还没有询问后端 true已经完成登录状态检查十、Vuex ActioninitializeAuthasync initializeAuth({ state, commit }) { if (state.authChecked) { return Boolean( state.currentUser ) } try { const user await getCurrentUser() commit( setCurrentUser, user ) return true } catch (error) { commit(clearAuth) return false } finally { commit( setAuthChecked, true ) } }参数解构原本 Vuex action 参数是context可以写async initializeAuth(context) { context.state context.commit(...) }这里使用解构async initializeAuth({ state, commit })直接取出state和commit。为什么finally设置authChecked无论Cookie 有效 Cookie 无效后端错误都说明检查已经完成。所以放在finallycommit(setAuthChecked, true)十一、路由守卫为什么变成 asyncrouter.beforeEach( async (to, from, next) { if (!store.state.authChecked) { await store.dispatch( initializeAuth ) } // 再判断是否登录 } )必须先等待/api/auth/me返回。错误流程currentUser 初始 null 立即判断未登录跳到登录页之后 /auth/me 才返回正确流程先等待 /auth/me ↓ 恢复 currentUser ↓ 再判断能否进入后台十二、Axios 的withCredentialsconst service axios.create({ withCredentials: true })它表示请求允许携带 Cookie 等凭证。当前开发代理是同源形式浏览器本来就会携带 Cookie。保留这个配置可以让后续前后端分开部署时更容易调整。十三、退出登录后端loginSessions.delete(token)删除服务器中的会话。然后res.clearCookie( SESSION_COOKIE_NAME, cookieOptions )通知浏览器删除 Cookie。前端commit(clearAuth)清空当前用户。完整退出流程点击退出 ↓ POST /api/auth/logout ↓ 后端删除 session ↓ 后端清除 Cookie ↓ Vuex 清除用户 ↓ 跳转 /login十四、阶段五的限制目前会话保存在const loginSessions new Map()后端一旦重启Map 被清空浏览器 Cookie 还在后端找不到对应 session 返回登录失效正式项目通常使用Redis 数据库 Session 服务保存会话。

阶段五：HttpOnly Cookie 登录持久化

相关推荐

番茄钟终极指南：如何用Tomodoro实现深度专注与高效时间管理

HarmonyOS：ArkTS数据模型的设计与演进实战

【Ollama多模型管理终极指南】：20年AI运维专家亲授高效切换、版本隔离与资源调度的5大黄金法则

更多资讯

LlamaIndex TablestoreChatStore：把聊天历史持久化到阿里云表格存储（Tablestore）的 Chat Store 集成

Android Studio中OpenCV配置与优化全攻略

Docker容器化部署若依(RuoYi)权限管理系统实战

Langfuse 前端大型功能架构：用本地 Zustand Store、无 useEffect 数据流与虚拟列表治理高状态密度界面

CANN/ge：从内存加载队列化模型

TVBoxOSC 上手指南：不编译也能拿到最新电视盒子版 TVBox

今日更新

CopilotKit Vue Demo 与 React Demo 的 Parity 实现指南：路由、运行时端点与交互语义的全框架对齐

Harbor RBAC 实战：db_auth 模式下非管理员用户管理项目成员的完整验证与权限模型解析

STM32平衡车纯平衡程序从拆包到参数整定的完整调试指南

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？