SSR 场景下登录态和 Cookie 应该如何处理？

简化版

SSR 登录态通常由服务端在渲染请求中读取 Cookie，再调用后端接口获取用户信息或校验会话。它和 CSR 最大的区别是：首屏渲染发生在服务端，所以鉴权不能只依赖浏览器里的 token，也不能随意把敏感 token 注水到 HTML。安全做法是使用 HttpOnly、Secure、SameSite Cookie，让服务端负责识别用户，客户端只拿必要的展示数据。

详细版

在 SSR 页面里，请求链路一般是浏览器访问页面，SSR 服务读取请求头中的 Cookie，根据 Cookie 判断用户身份，再决定渲染登录态、未登录态、重定向或返回错误页。

如果把 token 放进 localStorage，服务端首屏无法直接读取，容易出现服务端渲染未登录、客户端又变成已登录的闪烁和水合不一致。更稳的方式是让登录凭证走 Cookie，并通过 HttpOnly 降低 XSS 窃取风险。

面试中要补充一点：SSR 鉴权既是前端问题，也是服务端边界问题。前端页面可以控制展示，但真正的权限必须由后端接口校验。

完整版教学

一、SSR 登录态为什么特殊

CSR 页面先加载空壳，再由浏览器请求用户信息。

SSR 页面在服务端就要生成 HTML，因此服务端必须能判断当前用户是谁。

这意味着认证信息要能随页面请求一起到达 SSR 服务。

Cookie 天然会随同站请求发送，所以它更适合 SSR 登录态。

属性	作用	SSR 场景价值
HttpOnly	禁止 JS 读取	降低 token 被 XSS 盗走的风险
Secure	仅 HTTPS 发送	避免明文传输
SameSite	控制跨站携带	降低 CSRF 风险
Path / Domain	控制作用范围	避免凭证过度暴露

这些属性不是“写了就绝对安全”，但它们是登录态设计的基础盘。

三、服务端渲染时的鉴权流程

浏览器访问 SSR 页面。

SSR 服务读取请求 Cookie。

SSR 服务调用用户态接口或校验 session。

如果已登录，渲染用户相关 HTML。

如果未登录，渲染未登录页面或返回重定向。

不要把“页面显示了用户头像”当成权限控制。真正能不能访问数据，必须以后端接口鉴权为准。

四、代码层面的示例

export async function renderPage(request: Request) {
  const cookie = request.headers.get("cookie") ?? "";
  const user = await fetchCurrentUser({ cookie });

  if (!user) {
    return redirect("/login", 302);
  }

  return renderHtml({
    user: { id: user.id, name: user.name },
  });
}

这里注水到 HTML 的只是展示所需字段，不应该包含 session、refresh token、手机号明文等敏感信息。

五、常见状态不一致

服务端认为未登录，客户端认为已登录，会造成闪烁。

服务端使用旧 Cookie，客户端刷新 token 后未同步，会造成首屏错误。

多个子域 Cookie 作用域不一致，会造成某些页面登录态丢失。

接口和 SSR 服务走不同域名时，还要处理跨域 Cookie 和网关转发。

六、刷新 token 的设计

短期 access token 可以用于接口访问。

长期 refresh token 应尽量 HttpOnly 存放。

SSR 阶段如果发现 access token 过期，可以由服务端尝试刷新，或渲染一个稳定的未登录/过期状态。

不要让页面在服务端输出已登录内容，但客户端马上因为 token 过期跳走。

七、误区和追问

误区：SSR 登录态直接读 localStorage 就行。 服务端没有浏览器 localStorage，首屏阶段读不到。
误区：把 token 注水给客户端更方便。 方便但危险，容易扩大 XSS 后果。
误区：前端路由守卫能替代服务端鉴权。 路由守卫只能控制界面，不能保护真实数据。
追问：HttpOnly Cookie 会不会导致前端拿不到 token？ 是的，这正是安全设计的一部分，前端通过接口状态感知登录，而不是直接读 token。
追问：SSR 未登录应该返回 302 还是渲染登录页？ 私有页面更适合 302，公共页面可以渲染未登录态。
追问：如何避免 hydration 不一致？ 服务端和客户端使用同一份用户状态快照，并避免客户端立即推翻首屏判断。

八、面试表达模板

回答时可以按“凭证存储、服务端读取、接口校验、HTML 注水、安全属性、状态一致性”展开。

这样既能覆盖前端 SSR，又能体现你知道登录态不是单纯页面判断。

简化版

详细版