SSR 登录态和 Vuex 怎么防止用户串数据
先理解原理和示例,再练习完整口述与追问。
回答要点
每个请求创建独立状态,不把用户信息放在可变模块单例中;按请求传递必要 Cookie / headers。localStorage 无法在服务端读取;用户相关响应不能误用公共缓存,敏感信息不能随意注入客户端状态。
原理拆解
Node 模块会缓存,模块顶层的可变对象可能被多个请求共同使用。SSR 需要为每个请求建立独立的应用、store 和用户上下文;共享缓存只能保存适合共享的数据,并按权限与业务键隔离。序列化状态回客户端前,还应剔除不需要下发的敏感信息。
示例与推演
用户 A 和 B 并发访问,如果模块级 currentUser 在两个请求中被交替修改,A 的 HTML 可能读到 B 的用户信息。正确做法是在当前请求上下文取得会话,创建独立 store,再生成只包含当前用户所需数据的 HTML。接口认证也只向可信后端转发必需 Cookie/headers。
易错点
不能把 SSR 所有缓存都一刀切删除,也不能把用户态塞进全局单例。HttpOnly Cookie 的秘密不应通过 store 序列化重新泄露给浏览器脚本。
参考回答可直接练习口述
服务端要从每次请求的 Cookie、headers 等上下文获取认证,并按请求传给可信接口,不能从 localStorage 读取。Vuex state 等用户数据每请求独立创建,不存在可变模块单例里。公共缓存不能缓存个性化敏感响应,注入页面的状态也只放客户端确实需要的信息。这样同时避免 A 用户状态泄漏给 B,以及把服务端密钥意外序列化到页面。