阶段五：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 服务保存会话。